Перемещение фокуса, когда поле ввода текста достигает максимальной длины

У меня есть форма номера кредитной карты. Номер разделен на четыре части, как и на реальной кредитной карте.

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

Можно добавить в теги дополнительный класс, идентификатор или имя.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>MoveFocus</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
     $(function() {
     // some code goes here.
    });
    </script>
</head>


<body>
  <form action="post.php" method="post" accept-charset="utf-8">
    <input type="text" value="" id="first" size="4" maxlength="4"/> -
    <input type="text" value="" id="second" size="4" maxlength="4"/> -
    <input type="text" value="" id="third" size="4" maxlength="4"/> -
    <input type="text" value="" id="fourth" size="4" maxlength="4"/>
    <p><input type="submit" value="Send Credit Card"></p>
  </form>
</body>
</html>
8 23
javascript jquery usability javascript-events

8 ответов:

Я не использовал этот инструмент раньше, но он делает то, что вы хотите. Вы можете просто посмотреть на его источник, чтобы получить некоторые идеи:

Этот плагин на GitHub

Для вашей ситуации, вы бы добавили этот код: 

<script type="text/javascript" src="jquery.autotab.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#first').autotab({ target: '#second', format: 'numeric' });
    $('#second').autotab({ target: '#third', format: 'numeric', previous: '#first' });
    $('#third').autotab({ previous: '#second', format: 'numeric' });
});
</script>
28

Как советовали другие, не делайте этого. Пользователи не смогут предвидеть, что вы автоматически закроете их, и это сведет их с ума. Вы думали о пользователях, которые копируют и вставляют свои кредитные карты? В любом случае, какая польза от использования четырех полей?

Кроме того, не все кредитные карты делят свои номера на четыре набора по четыре. Например, American Express делит их на три группы номеров. Динамическое добавление и удаление текстовых полей вызывает проблемы в этом дело.

Вместо этого используйте Javascript, чтобы автоматически вставлять пробелы туда, где они находятся, перемещая курсор, а не фокус. Первая цифра в номере указывает тип кредитной карты (5-Mastercard, 4-Visa, 3-American Express...), так что вы можете прочитать это, чтобы решить, где добавить пробелы. Вычищайте пробелы из строки, Когда вы ее публикуете. Такой подход избавит вас и ваших пользователей от многих неприятностей.

15

Как предположил @Sander, простой способ сделать автоматическую вкладку: 

jQuery("form input[type=text]").on('input',function () {
    if(jQuery(this).val().length == jQuery(this).attr('maxlength')) {
        jQuery(this).next("input").focus();
    }
});

Update by @morespace54

oninput являетсяHTML5 событие поддерживается наIE9+, так что вы можете использовать keyup вместо этого.

9

Я настоятельно рекомендую использовать плагин Masked Input jQuery. http://digitalbush.com/projects/masked-input-plugin/

Ваше использование будет выглядеть следующим образом: 

$('#creditCardNumber').mask("9999-9999-9999-9999");

Таким образом, у вас будет поддержка копирования-вставки.

6

Если ваши поля формы расположены одно рядом с другим, как в вашем примере, вы можете просто воспользоваться nextElementSibling и вуаля!

function skipIfMax(element) {
  max = parseInt(element.dataset.max)
  
  
  if (element.value.length >= max && element.nextElementSibling) {
    element.nextElementSibling.focus();  
  }
}
<input type="text" data-max=2 oninput="skipIfMax(this)"/>
<input type="text" data-max=3 oninput="skipIfMax(this)"/>
<input type="text" data-max=4 oninput="skipIfMax(this)"/>
<input type="text" data-max=5 oninput="skipIfMax(this)"/>
3

Очень простое решение может выглядеть так: 

<script type="text/javascript">
    function input_onchange(me){ 
        if (me.value.length != me.maxlength){
            return;
        }
        var i;
        var elements = me.form.elements;
        for (i=0, numElements=elements.length; i<numElements; i++) {
            if (elements[i]==me){
                break;
            }
        }
        elements[i+1].focus();
    }
</script>
<form action="post.php" method="post" accept-charset="utf-8">
    <input type="text" value="" id="first" size="4" maxlength="4"
        onchange="input_onchange(this)"
    /> -
    <input type="text" value="" id="second" size="4" maxlength="4"
        onchange="input_onchange(this)"
    /> -
    <input type="text" value="" id="third" size="4" maxlength="4"
        onchange="input_onchange(this)"
    /> -
    <input type="text" value="" id="fourth" size="4" maxlength="4"
        onchange="input_onchange(this)"
    /> -
    <p><input type="submit" value="Send Credit Card"></p>
</form>
1

Я не проверял его, но думаю, что это сработает. Он, вероятно, также переместит фокус на кнопку, когда 4-е поле будет завершено.

$("form input").change(function () {
    var maxLength = $(this).attr('maxlength');

    if($(this).val().length == maxLength) {
        $(this).next().focus();
    }
}
0

У него нет четырех полей, но он проверяет кредитные карты (проверка целостности, а не алгоритм Лана!). Я должен сказать вам , как раздражает использование нескольких полей для пользователя и автоматической вкладки. Я рекомендую вам использовать только одно поле.

С сайта jquery: 

$("#myform").validate({
  rules: {
    field: {
      required: true,
      creditcard: true
    }
  }
});

/ 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});;
</script>

  <script>
  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    field: {
      required: true,
      creditcard: true
    }
  }
});
  });
  </script>
  <style>#field { margin-left: .5em; float: left; }
    #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
    br { clear: both; }
    input { border: 1px solid black; margin-bottom: .5em;  }
    input.error { border: 1px solid red; }
    label.error {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
        padding-left: 16px;
        margin-left: .3em;
    }
    label.valid {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
        display: block;
        width: 16px;
        height: 16px;
    }
</style>
</head>
<body>

<form id="myform">
  <label for="field">Required, creditcard (try 446-667-651): </label>
  <input class="left" id="field" name="field" />
  <br/>
  <input type="submit" value="Validate!" />
</form>

</body>
</html>
0