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

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

4 голосов
/ 28 марта 2012

Я использую приведенный ниже 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="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>

1 Ответ

2 голосов
/ 29 марта 2012

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

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

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

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

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

...