Hide soft keyboards on mobile devices using content ads

Question

I use contenteditable divs to view the page on mobile devices to access some content. I want the soft keyboard to hide when the user presses the enter button, instead of the usual input action in a div. My first attempt to get 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, this does not seem to work as it did on input. Div loses focus, but the keyboard does not hide on either iOS or Android.

I also tried the solution on closing the keyboard on the iPad in a contenteditable div , but found that it was not working. If I focus on a different text field and blur on iOS, it still doesn’t close the keyboard, but on Android I found that it changes the keyboard to the one used for regular fields, where pressing the enter button again closes the keyboard, but this is not the expected behavior close it immediately when input is clicked in the div's content box. It seems strange to me, because if I touched this input field myself and then blurred it with javascript, then the keyboard would be closed properly.

Is there a way to have a content-accessible div that closes soft keyboards on Android and iOS devices when typed in when that div is focused?

Answer 1

This workaround works fine, at least with Android (I can't test the 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>