Question

以下脚本不起作用...有谁知道错误是什么？当输入达到最大长度限制时，我试图将焦点跳转到下一个表单字段。

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>SECURITY</title>
      <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#focus1,#focus2,#focus3').keyup(function(e){
            if($(this).val().length==$(this).attr('maxlength'))
                $(this).next(':input').focus()
        })
    })
    </script>
</head>

<body>
<div class="container">  
  <form id="contact" action="" method="post">
    <h3SECURITY</h3>
    <fieldset>
      <input id="focus1" placeholder="Barcode" type="text" tabindex="1" maxlength="1" size="1"  required>
    </fieldset>
    <fieldset>
      <input id="focus2" placeholder="Identification Number" type="text" tabindex="2" maxlength="1" size="1" required>
    </fieldset>
      <input id="focus3" placeholder="Truck Number" type="text" tabindex="3" maxlength="1" size="1" required>
    </fieldset>
    <fieldset>
      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
    </fieldset>
  </form>
</div>

</body>
</html>

Answer 1

这是一个有效的版本：

$(function() {
  $('#focus1,#focus2,#focus3').keyup(function(e) {
    if ($(this).val().length >= $(this).attr('maxlength')) {
      $(this).parent().next('fieldset').find('input').focus();
    }
  });
});

和demo。

Answer 2

在结束script代码body之前移动您的'</body>'部分。

<script type="text/javascript">
$(function(){
    $('#focus1,#focus2,#focus3').keyup(function(e){
        if($(this).val().length==$(this).attr('maxlength'))
            $(this).next(':input').focus()
    })
})
</script>

</body>

当输入达到最大长度限制时，如何将焦点跳转到下一个表单字段？

2 个答案: