How to change the input focus on a tablet with js?

Question

I'm using the JavaScript below to change the focus to the next input in a form when the max-length of the input is reached. It works well on a desktop but it does not work on a tablet. When the current input loses the focus, the virtual keyboard closes itself and the next inputbox doesn't get the focus.

Does anyone know how to change the input focus on a tablet without using the native "next" button?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0" />
<title>inpuTest</title>

<script language="JavaScript">
function myCtrl(elmnt)
{
if (elmnt.value.length==elmnt.maxLength)
    {
    next=elmnt.tabIndex
    if (next<document.frmContact.elements.length)
        {
        document.frmContact.elements[next].focus()

        }
    }
}
</script>

<style type="text/css">
form{
    margin:0 auto;
    background-color:#CCC;
    padding:2%;
    border:1px solid #999;
}

form input,textarea{
    width:96%;
}
</style>
</head>
<body>
<form name="frmContact" method="post">
  <strong>1. Your name:</strong> <span class="times_17">(max-lenght 4)</span><br /><br />
  <input name="formName" tabindex="1" value="" placeholder="Name" maxlength="4" type="text" onFocus="this.select()" onkeyup="myCtrl(this)"><br /><br />
  <strong>2. Your email:</strong> <span class="times_17">(required)</span><br /><br />
  <input id="formEmail" name="formEmail" tabindex="2" value="" placeholder="example@mail.it" maxlength="4" type="text" onFocus="this.select()" onkeyup="myCtrl(this)"><br /><br />
  <strong>3. Your number:</strong><br /><br />
  <input name="formWebsite" tabindex="3" placeholder="Only numbers 1234" maxlength="4" type="number" onFocus="this.select()" onkeyup="myCtrl(this)"><br /><br />
  <strong>4. Your comments:</strong> <span class="times_17">(required)</span><br /><br />
  <textarea name="formComment" tabindex="4" id="comment" cols="45" rows="5" class="input2"></textarea>
</form>
</body>
</html>

i copied your code in [JSFiddle](http://jsfiddle.net/d8Nas/) and it does not work in chrome and firefox... — Neysor, Mar 28 '12 at 15:51
pasting all the code in the html box in [JsFiddle](http://jsfiddle.net/d8Nas/3/) it works. Thanks for your answer. — Danja, Mar 29 '12 at 08:44

score 2 · Answer 1 · edited May 23 '17 at 12:04

It is not possible to do that on ipad. I do not know if android does, but i think you also want to have that on ipad. It is because of the Apple design that some focus events in Mobile Safari are ignored.

You can look at these questions on Stack overflow:

or look at quora where Allen Pike says:

By design, some focus() events in Mobile Safari are ignored. A lot of sites would do focus() unnecessarily and bringing up the keyboard is slow/intrusive. This is particularly annoying when using frameworks like SproutCore that do their work in a timeout-based run loop. Han Wei's answer is a good look at how to work around this.

I'm sorry that i did not found an equal link for android. It can be because it is working there, or no one seems to be interested for such a thing on android :)

How to change the input focus on a tablet with js?

1 Answers1