Question

我的表单中有以下字段，用户应输入10位数字。

我在3个单独的字段（3-3-4）中显示数字：

Phone: [_ _ _]-[_ _ _]-[_ _ _ _]

代码：

     <div id="phone-element" class="form-element">
       <input type="tel" size="3" name="phone1" id="phone1" maxlength="3" tabindex="3" pattern="[0-9]{3}" title="3 digit phone number. Eg.808" required=""> <span class="wc_sep">-</span>
       <input type="tel" size="3" name="phone2" id="phone2" maxlength="3" tabindex="4" pattern="[0-9]{3}" title="3 digit phone number. Eg.789" required=""> <span class="wc_sep">-</span>
        <input type="tel" size="4" name="phone3" id="phone3" tabindex="5" pattern="[0-9]{4}" maxlength="4" title="4 digit phone number. Eg.1374" required="">
      </div>

但目前在每个字段之间，用户需要将鼠标放在下一个字段中才能继续输入数字。

如何连续拍摄？

Answer 1

这可以通过jQuery检查输入值的length（在keyup上）与输入上设置的maxlength来完成。如果输入值的length与输入的maxlength匹配，则focus下一个输入：

＆＃13;

$(function() {
  $('input[type="tel"]').keyup(function () {
    if (this.value.length === this.maxLength) {
      $(this).nextAll('input[type="tel"]').first().focus();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="phone-element" class="form-element">
    <input type="tel" size="3" name="phone1" id="phone1" maxlength="3" tabindex="3" pattern="[0-9]{3}" title="3 digit phone number. Eg.808" required="">
    <span class="wc_sep">-</span>
    <input type="tel" size="3" name="phone2" id="phone2" maxlength="3" tabindex="4" pattern="[0-9]{3}" title="3 digit phone number. Eg.789" required="">
    <span class="wc_sep">-</span>
    <input type="tel" size="4" name="phone3" id="phone3" tabindex="5" pattern="[0-9]{4}" maxlength="4" title="4 digit phone number. Eg.1374" required="">
</div>

＆＃13;

Answer 2

您需要使用JavaScript。

将事件监听器附加到keyup上的输入元素。如果字段的长度与预定长度匹配，请将焦点添加到下一个输入元素。

e.g。

var phone1 = document.getElementById('phone1');
phone1.addEventListener('keyup', function() {
    if (phone1.value.length === 3) {
       document.getElementById('phone2').focus();
    }
});

您可能需要满足您发现的任何边缘情况，以确保UX顺利进行，但这应该可以帮助您入门。

Answer 3

你可以使用jquery

<html>
  <head>
    <title></title>
    <meta content="">
    <style></style>
    <script type="text/javascript" src="jquery.js"></script>
  </head>
  <body>
    <input type="text" name="" id="field1">
    <input type="text" name="" id="field2">
    <input type="text" name="" id="field3">

    <script type="text/javascript">
      $(function(){
        var field1 = $("#field1");
        var field2 = $("#field2");
        var field3 = $("#field3");
        field1.on("keyup", function(e){
            if(field1.val().length == 3)
            {
                field2.focus();
            }
        })

        field2.on("keyup", function(e){
            if(field2.val().length == 3)
            {
                field3.focus();
            }
        })
      })
    </script>
  </body>
</html>

允许用户连续填写多个表单字段

3 个答案: