logo标签列表

使用Javascript自动跳转到下一个表单字段

javascript
5

当输入框中的文本达到了设定的 maxlength 时，是否可以使用 Javascipt 自动将用户引导到下一个输入框？

如果可以，该如何实现？

6个回答
1

是的，这是可能的。假设您的文本框最大长度为5。您需要在onkeyup事件上创建一个函数，并计算文本框值的长度。在此函数中，如果长度等于或超过5，则需要编写第二个文本框焦点函数调用。

1
我使用了这段代码： function moveOnMax(field,nextFieldID) { if(field.value.length >= field.maxLength) { document.getElementById(nextFieldID).focus(); } } <input name="productkey1" type="text" id="productkey" onKeyUp="moveOnMax(this,productkey2)" size="4" maxlength="5"/> - <input name="productkey2" type="text" id="productkey2" size="4" maxlength="5"/> 但它没有起作用。 - Apb
1
@user2156244：请使用以下已更正的代码... <script language="javascript" type="text/javascript"> function moveOnMax(field, nextFieldID) { if (field.value.length >= field.maxLength) { nextFieldID.focus(); } } </script> <input name="productkey1" type="text" id="productkey" onkeyup="moveOnMax(this,document.getElementById('productkey2'))" size="4" maxlength="5" /> <input name="productkey2" type="text" id="productkey2" size="4" maxlength="5" /> - Gaurav Agrawal
var keyUpTimeout; $body.on('keyup', '.auto-focus-prev-next', function (event) { var $target = $(event.target); clearTimeout(keyUpTimeout); keyUpTimeout= setTimeout(function() { if ($target.val().length === parseInt($target.attr('maxlength'))) { $target.nextAll('input:not([readonly]):first').focus(); } if($target.val().length === 0) { $target.prevAll('input:not([readonly]):first').focus(); } }, 100); }); - Arthur Shlain
1
$('#productkey1').keyup(function() {
     if(this.value.length >= $(this).attr('maxlength'))
     {
         $('#productkey2').next().focus();
     }
 });
如果用户复制了大量的内容到文本框中，最好使用 >= 而不是 ==。 - Raptor
尝试通过删除 .next()。你能给我展示代码吗？ - PSR
代码： - - Apb
@user2156244，我创建了链接http://jsfiddle.net/khbEL/，请看这里，它正在工作。 - PSR
现在对你有效吗？ - PSR
0

是的。您需要：

  • 监视{{link1：onkeydown}}事件以防止字符“溢出”，
  • 根据自己的逻辑/结构查找表单中的下一个输入字段，当发生这种情况时，
  • 使用{{link2：focus}}方法将焦点设置在下一个字段上。
0

是的，您需要通过onkeyup事件计算输入字段中插入的字符数。如果字符数等于最大长度，则将focus设置为下一个字段。

我使用了这个函数：function moveOnMax(field,nextFieldID) { if(field.value.length >= field.maxLength) { document.getElementById(nextFieldID).focus(); } }但它没有起作用。 - Apb
在查找长度之前，您应该将“field”作为对象进行处理。因此，在将其传递到if语句之前，请创建一个对象，称为“document.getElementById(field)”。 - Sudip Pal
0

你可以使用 jQuery 来编写类似以下的代码。在该代码中，当文本长度超过20个字符时，将会跳转到 #second 字段

<input id="first"/>
<input id="second"/>
<script>
$(function() {
   $('#first').keypress(function() {
      var self = $(this);
      //wait until character is inserted
      setTimeout(function() {
         if (self.val().length > 20) {
            $('#second').focus();
         }
      }, 1);
   });
});
</script>
你为什么要使用setTimeout？ - SwissCoder
@SwissCoder 抱歉，我不知道，它是9年前创建的。也许没有它就无法正常工作。 - jcubic
0

首先，您需要钩入输入的onfocus事件，以知道您正在开始测量。然后，您需要使用onkeyup事件检查输入字符的长度。一旦达到限制，您可以在下一个DOM元素上调用focus()，以将光标移动到该元素上。您还需要使用onblur事件来知道您已停止测量输入的长度。

例如，使用jQuery：

<input id="inputA" type="text"/>
<input id="inputB" type="text"/>

<script>

var $input;

$('#inputA').focus(function() {
    $input = $(this);
});

$(window).keyup(function() {
    if($input && $input.val().length == 5) {
        $('#inputB').focus();
    }
});

$('#inputA').blur(function() {
    $input = null;
});

</script>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接