Geek Answers Handbook

How to make the on-screen keyboard disappear when you change focus from one text field to another

I have an HTML5 application that uses an input field of type = "text" to enter text. I caught keystroke events to bind specific fields.

I'm having trouble testing on any mobile device. At first I tried it on an iPad using Safari or Chrome. However, later I also tried it on an Android device using the latest version of Mobile Firefox and experienced the same problem.

The problem is that as soon as the input element changes, the on-screen keyboard leaves. I tried to do this in several different ways, but it always seems to produce the same effect - as soon as I focus () on another text input, the keyboard disappears. This is a serious obstacle to the flow, as it requires additional movement to correctly reselect the text field that is already selected, and it must have focus and receive keyboard input. On a small device, such as a phone, this is even worse, since all this is accompanied by zooming and panning, as deleting and re-displaying the keyboard causes the page to re-display. It’s like what will happenif one keyboard stops working and needs to be reloaded each time you press enter while editing a text document, this will clearly be a critical problem.

The following minimal code reproduces the problem:

<!doctype html>
<html lang="en">
<head>
<style type="text/css">
  :focus { color: red; }
</style>

<script type="text/javascript">
function init() {
var tf1 = document.getElementById('tf1')
var tf2 = document.getElementById('tf2')
tf1.focus()                                                                                                                                         
tf1.onkeydown = function(evt) {
    if (evt.which == KeyEvent.DOM_VK_RETURN
        || evt.which == KeyEvent.DOM_VK_Q
        || evt.which == KeyEvent.DOM_VK_ENTER) {
        tf2.focus()
        if (evt.stopPropogation) evt.stopPropogation()
        if (evt.preventDefault) evt.preventDefault()
        return false
        }
    }
}
</script>
<body onload="init()">
<input type='text' id='tf1' value='field1' />
<input type='text' id='tf2' value='field2' />
</body>
</html>

First of all, I note that although the initial focus () works (the item turns red), the on-screen keyboard does not appear. While this is troubling, it’s easy to touch to initially touch the text field. However, as soon as I press any of the launch buttons (I selected a regular character there to confirm that it does not matter what it is), the keyboard suddenly disappears. It doesn't make any sense to me, not just the text element that is still focused, which requires an on-screen keyboard, but it was a keyboard event that changed focus, which suggests that the keyboard might still be needed - it’s not, how I did it with a delay or something like that.

onkeydown, onkeyup onkeypress - .

? , , - ! - , - ? - ,

+4
1

click() tf1.focus();

:

tf1.click();

.

+1

More articles:


All Articles