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

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

23 голосов
/ 24 декабря 2009

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

Я хочу добавить вкус 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 ]

28 голосов
/ 24 декабря 2009

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

Этот плагин на 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>
15 голосов
/ 24 декабря 2009

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

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

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

9 голосов
/ 10 июня 2013

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

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

Обновление от @ morespace54

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

6 голосов
/ 09 мая 2013

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

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

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

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

4 голосов
/ 24 октября 2016

Если ваши поля формы одно рядом с другим, как в вашем примере, вы можете просто воспользоваться 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)"/>
1 голос
/ 24 декабря 2009

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

<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>
0 голосов
/ 24 декабря 2009

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

С 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 голосов
/ 24 декабря 2009

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

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

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