1

I have a div that use contenteditable = "true", when i use mobile device like iphone and click this div (focus this div), keyboard will open. But when I click "done" button on keyboard (not return/enter), the keyboard can't close. How can I close the keyboard when I click "done" button. Any ideas what I'm doing wrong?

document.getElementById('send-msg-content').addEventListener("keypress", function( event ) {
  alert('keypress');
}, true);

document.getElementById('send-msg-content').addEventListener("keydown", function( event ) {
  alert('keydown');
}, true);

document.getElementById('send-msg-content').addEventListener("keyup", function( event ) {
  alert('keyup');
}, true);
.send-msg-content{
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    -khtml-user-select: text;
    user-select: text;
    border:1px solid blue;
    resize: none;
}

.send-msg-content:empty:before {
    content: attr(placeholder);
    color: #aaa;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    line-height: 1em;
    pointer-events:none;
}
<div oncontextmenu="return false;" contenteditable="true" placeholder="talk something" class="send-msg-content" id="send-msg-content" inputmode="text"></div>

This gif file is my operation situation:

enter image description here

kian
  • 1,449
  • 2
  • 13
  • 21
yi-kai
  • 11
  • 3
  • Have you tried this `? https://stackoverflow.com/questions/12570362/hiding-soft-keyboards-on-mobile-devices-when-using-contenteditable-divs – Carsten Løvbo Andersen Jan 05 '22 at 06:38
  • Yes, I have use javascript setting my div has "keypress", "keyup", "keydown" events, but when i click "done" button，all events can't trigger – yi-kai Jan 05 '22 at 06:46
  • can you please add JS? so we can understand what's wrong with it. – aekit Jan 05 '22 at 06:54
  • Sorry, I have add JS, if use mobile keyboard and press 'done' button on keyboard, nothing will happened. If i can capture press 'done' button event, then I can close keyboard that use document.getElementById('send-msg-content').blur() – yi-kai Jan 05 '22 at 07:10

0 Answers0