CODEWITHSUNDEEP
javascriptandroidioskeyboardcontenteditable
FlyingCube
FlyingCube

Reputation: 131

Hiding soft keyboards on mobile devices when using contenteditable divs

I am using contenteditable divs for a page to be viewed by mobile devices to get input for some stuff. I want the soft keyboard to hide when the user presses enter, instead of the normal action of enter in a div. My first attempt at getting it to work looks something like this:

if event.keyCode == 13 #enter
  event.preventDefault() #to prevent the normal behaviour of enter
  @$("#the_editable_div").blur()

However, it seems like this does not work as it would with an input. The div loses focus but the keyboard does not hide on either iOS or android.

I have also tried the solution at Closing keyboard on iPad in div contenteditable but found that it did not work. If I focus on another text field and blur on iOS stuff it still does not close the keyboard, and on android I have found that it changes the keyboard to one used for regular fields, where pressing enter again will close the keyboard, but that is not the expected behaviour of it closing immediately when enter is pressed in the contenteditable div field. This seems strange to me since if I were to tap on that input field myself and then blur it via javascript then the keyboard closes properly.

Is there a way to have a contenteditable div that closes the soft keyboards on android and iOS devices when enter is pressed when that div is focused?

Upvotes: 5

Views: 3290

Answers (1)

Xodrow
Xodrow

Reputation: 315

This workaround works fine, at least with Android (I can't test on iPad) :

<input type="text" id="ghostInput" style="position:absolute;top:-50px" />
<div id="myDiv" contenteditable="true" style="width:100%;height:100px;background-color:yellow"></div>
<script>
    var ghostInput = document.getElementById("ghostInput");
    ghostInput.onfocus = function () {
        ghostInput.blur();
    }
    document.getElementById("myDiv").onkeydown = function (e) {
        if (e.keyCode == 13) ghostInput.focus();
    }
</script>

Upvotes: 1

Related Questions