Как изменить фокус ввода на планшете с помощью js?

Я использую приведенный ниже JavaScript, чтобы переключить фокус на следующий ввод в форме, когда достигается максимальная длина ввода. На десктопе работает хорошо, а на планшете не работает. Когда текущий ввод теряет фокус, виртуальная клавиатура закрывается, а следующее поле ввода не получает фокус.

Кто-нибудь знает, как изменить фокус ввода на планшете без использования родной кнопки "далее"?

<!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="[email protected]" 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>

javascript focus html tablet inputbox
person Danja    schedule 28.03.2012    source источник
comment
Я скопировал ваш код в JSFiddle, и он не работает в Chrome и Firefox...   -  person Neysor    schedule 28.03.2012
comment
вставив весь код в поле html в JsFiddle, он работает. Спасибо за Ваш ответ.   -  person Danja    schedule 29.03.2012
comment
сорри за это, посмотрю   -  person Neysor    schedule 29.03.2012

Ответы (1)


arrow_upward
2
arrow_downward

На айпаде это невозможно. Я не знаю, есть ли у Android, но я думаю, что вы также хотите иметь это на iPad. Именно из-за дизайна Apple некоторые события фокуса в Mobile Safari игнорируются.

Вы можете посмотреть на эти вопросы о переполнении стека:

или посмотрите на quora, где Аллен Пайк говорит:

По замыслу некоторые события focus() в Mobile Safari игнорируются. Многие сайты будут делать focus() без необходимости, а вызов клавиатуры будет медленным/навязчивым. Это особенно раздражает при использовании таких фреймворков, как SproutCore, которые выполняют свою работу в цикле выполнения на основе тайм-аута. Ответ Хань Вэя - хороший взгляд на то, как обойти это.

Мне жаль, что я не нашел равной ссылки для Android. Может быть потому, что там это работает, а может на андроиде такая штука никому не интересна :)

person Neysor    schedule 29.03.2012