如何在輸入達到最大長度限制時將焦點跳到下一個表單域？

以下腳本不起作用......有人知道錯誤是什麼？當輸入達到最大長度限制時，我正試圖將焦點跳到下一個表單域。如何在輸入達到最大長度限制時將焦點跳到下一個表單域？

<!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>

來源

2017-02-18 Ting Ping

剛剛結束body標籤'</body>'之前將您的script部分。

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

</body>

來源

2017-02-18 11:58:27

這不起作用。 –

jquery .next（）函數只針對第一個兄弟元素。在你的情況下，下一個輸入不是兄弟姐妹，而是一個「表親」，這意味着你必須出去（目標父母），然後是父母的兄弟姐妹，然後是其孩子。 –

這裏是可用的版本：

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

和它的demo。

來源

2017-02-18 12:42:00 Javarome

如何在輸入達到最大長度限制時將焦點跳到下一個表單域？

回答

相關問題