Question

假设我的网页上有两个HTML文本框：

<input type='text' id='txt1' maxlength='5' />
<input type='text' id='txt2' maxlength='5' />

每个文本框允许用户输入最多五个字符。当用户将五个字符键入txt1时，如何使用带或不带jQuery的Javascript自动将光标从txt2移动到txt1？

Answer 1

基本实现如下：

 $('#txt1').keyup(function() {
     if(this.value.length == $(this).attr('maxlength')) {
         $('#txt2').focus();
     }
 });

但是你可能会或可能不会关心它的一些可用性微妙之处。如果您发现上述内容不足，那么有很多jQuery插件可以帮到您。

Answer 2

它被称为autotabbing，并且jquery已经有许多插件可以执行此操作。只是谷歌吧。

如果您想知道如何操作，那么将onkeyup事件绑定到输入。每次释放一个键时，请确保它不是一个功能键，例如“Tab”（您应该允许用户“Shift + Tab”或“Tab”到输入而不用它然后自动接收到下一个字段。）

然后，如果输入值的长度超过输入的maxlength属性，则将焦点设置在下一个输入上（在jQuery中，$currentInput.next('input').focus()。

Answer 3

这些解决方案都不能直接使用Javascript ...这个片段是一个开始：

document.getElementById('txt1').onkeydown = function() {
  if (this.value.length == this.maxLength)
   document.getElementById('txt2').focus();
}

但是一旦你输入了这个号码，你就无法返回并编辑它，因为只要你点击删除它就会跳回到txt2。

唯一要改变的是改为 onkeyup 。：d

jQuery对于它所使用的绝大多数事物都是过度和懒惰的编程，这是一个伟大的示例。除非你已经在页面上使用它，否则对于这么小的任务来说，这是一个很糟糕的开销。

Answer 4

想法是处理keydown事件并检查是否已达到最大长度;如果是这样，请关注下一个控件。

document.getElementById('txt1').onkeydown = function() {
  if (this.value.length == this.maxLength)
    document.getElementById('txt2').focus();
}

Answer 5

JQuery插件：

https://github.com/Mathachew/jquery-autotab

最简单的用途：

将类自动添加到您的输入中。

$('.autotabbed').autotab();

Answer 6

你可以通过复制这样的类来利用jQuery UI的:focusable选择器：

$.extend($.expr[':'], {
    focusable: function(element) {
        var nodeName = element.nodeName.toLowerCase(),
            tabIndex = $.attr(element, 'tabindex');
        return (/input|select|textarea|button|object/.test(nodeName)
            ? !element.disabled
            : 'a' == nodeName || 'area' == nodeName
                ? element.href || !isNaN(tabIndex)
                : !isNaN(tabIndex))
            // the element and all of its ancestors must be visible
            // the browser may report that the area is hidden
            && !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length;
    }
});

然后你可以像这样处理它：

$(document).ready(function() {
    $('input[type=text]').keydown(function() {
        var $this = $(this),
            $focusables = $(':focusable'),
            current = $focusables.index(this),
            $next;

        if ($this.val().length == $this.attr('maxlength')) {
            $next = $focusables.eq(current+1).length ?$focusables.eq(current+1) : $focusables.eq(0);
                $next.focus();
        }
    });
});

请参阅此处的工作示例：

http://jsfiddle.net/kU6ZN/

Answer 7

此解决方案允许向后制表符。...

$("#txt1").on('input', function () {
    if (this.value.length == this.maxLength) {
        $('#txt2').focus();
    }
});

在Javascript中，如何在当前文本框已满时自动将光标移动到下一个文本框？

7 个答案: