В Javascript как автоматически переместить курсор в следующее текстовое поле, когда текущее заполнено?

Предположим, у меня есть два текстовых поля HTML на моей веб-странице:

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

каждое текстовое поле позволяет пользователю вводить до пяти персонажей. Как я могу использовать Javascript с или без jQuery для автоматического перемещения курсора из txt1 to txt2 когда пользователь вводит пять символов в txt1?

8
javascript jquery textbox

6 ответов

базовая реализация будет выглядеть так:

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

но есть некоторые тонкости юзабилити, о которых вы можете или не заботиться. Если вы считаете, что выше недостаточно, есть много плагинов jQuery, чтобы сделать это для вас.

16

это называется autotabbing, и есть много плагинов, которые уже существуют для jquery, которые делают это. Просто погугли.

Если вы хотите знать, как это сделать, то вы привязываете событие onkeyup к входам. Каждый раз, когда ключ освобождается, убедитесь, что это не функциональный ключ, такой как "Tab" (вы должны позволить пользователю "Shift+Tab" или "Tab" на вход без него, а затем автотаббировать в следующее поле.)

затем, если длина входного значения превышает входную maxlength атрибут, установите фокус на следующий вход (в jQuery,$currentInput.next('input').focus().

3

ни одно из этих решений не работает в прямом Javascript... этот фрагмент является началом:

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

но как только вы ввели номер, вы не можете вернуться и отредактировать его, потому что, как только вы нажмете delete, он вернется к txt2.

единственное, что нужно изменить, это сделать это onkeyup вместо. : D

jQuery является излишним и ленивым программированием для подавляющего большинства вещей, на которых он используется, и это большой пример. Если вы не уже используя его на странице, это ужасно много накладных расходов для такой крошечной задачи.

2

идея состоит в том, чтобы справиться с keydown событие и проверьте, достигнута ли максимальная длина; если да, сфокусируйте следующий элемент управления.

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

плагин JQuery:

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

простой использовать:

добавить класс autotabbed к вашим входам.

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

вы можете использовать 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/

0