Блог

У меня есть сайт jquery Mobile с html-формой, состоящей из 4 полей ввода pin-кода. Я хочу, чтобы пользователь мог вводить PIN-код в каждое поле ввода без необходимости нажимать на клавиатуре iphone кнопку «Далее». Я попробовал следующее, и хотя кажется, что он устанавливает фокус на второй ввод и вставляет значение, клавиатура исчезает, поэтому пользователю все равно приходится активировать требуемый ввод с помощью события tap.

 $('#txtPin1').keypress(function() {
        $('#txtPin1').bind('change', function(){  
            $("#txtPin1").val($("#txtPin1").val()); 
        });
        $("#txtPin2").focus();
        $("#txtPin2").val('pin2');
});
  

Есть ли другое событие, которое я должен назначить $ («#txtPin2»)?

Я попытался реализовать http://jqueryminute.com/set-focus-to-the-next-input-field-with-jquery это тоже, но я обнаружил, что это работает для Android, а не для iphone.

Я очень признателен за любую помощь.

Живой пример:http://jsfiddle.net/Q3Ap8/22 /

JS:

 $('.txtPin').keypress(function() {
    var value = $(this).val();

    // Let's say it's a four digit pin number
    // Value starts at zero
    if(value.length >= 3) {
        var inputs = $(this).closest('form').find(':input');
        inputs.eq( inputs.index(this)  1 ).focus();
    }
});
  

HTML:

 <div data-role="page" data-theme="b" id="jqm-home">
    <div data-role="content">
        <form id="autoTab">
            <label for="name">Text Pin #1:</label>
            <input type="text" name="txtPin1" id="txtPin1" value="" class="txtPin" placeholder="Please enter Pin #1"/>

            <br />
            <label for="name">Text Pin #2:</label>
            <input type="text" name="txtPin2" id="txtPin2" value="" class="txtPin" placeholder="Please enter Pin #2"/>

            <br />
            <label for="name">Text Pin #3:</label>
            <input type="text" name="txtPin3" id="txtPin3" value="" class="txtPin" placeholder="Please enter Pin #3"/>

            <br />
            <label for="name">Text Pin #4:</label>
            <input type="text" name="txtPin4" id="txtPin4" value="" class="txtPin" placeholder="Please enter Pin #4" maxlength="4"/>
        </form>
    </div>
</div> 
  

Я попробовал это на Android, и это работает. Я не могу проверить это на iPhone. Проверьте это: http://jsfiddle.net/Q3Ap8/276 [прямая ссылка:http://fiddle.jshell.net/Q3Ap8/276/show / ]

 $('.txtPin').keydown(function() {
    that=this;
    setTimeout(function(){
        var value = $(that).val();
        if(value.length > 3) {
        $(that).next().next().next().focus().tap();
        }
     },0);
});
  

Другое решение, которое работает для Android, это:
http://jsfiddle.net/Q3Ap8/277 / [ http://jsfiddle.net/Q3Ap8/277/show ]

 $('.txtPin').keydown(function() {
    that=this;
    setTimeout(function(){
        var value = $(that).val();
        if(value.length > 3) {
        $(that).next().next().next().click();
        }
     },0);
});
$('.txtPin').click(function() {
   $(this).focus().tap();
});