Я пытаюсь сосредоточиться на входе с помощью jQuery. Я легко могу это сделать, используя идентификатор входного тега, однако он установлен в id из поля базы данных и упорядочен по-другому. Это делает это не так хорошо, как я хочу, когда вы используете, чтобы сосредоточиться. Я хочу, чтобы иметь возможность использовать атрибут данных HTML5, чтобы сосредоточиться на следующем:
<input class="navigable" type="text" data-id="1" ID="123" data-number="1" maxsize="1">
Я хочу сосредоточиться на этом с помощью jQuery. В настоящее время у меня есть:
$('.navigable').keyup(function() {
var self = $(this);
var next = $('#txt'+(self.data('number')+1));
if(next.length > 0 && self.val().length == self.attr('size')) {
next.focus();
}
Мой тег HTML должен быть таким:
<input type="text" class="navigable" id="txt1" data-number="1" maxsize="1">
Заранее спасибо.
У вас есть опечатка в коде. Вы забыли закрыть, если условие }
. И self.attr('size')
вернется не определен. Потому что у вас нет никакого атрибута с именем size на вашем входе. Поэтому замените self.attr('size')
на self.data('number')
.
Попробуй это:
$('.navigable').keyup(function() {
var self = $(this);
var next = $('#txt'+(self.data('number')+1));
console.log(next);
if(next.length > 0 && self.val().length == self.data('number')) {
next.focus();
}
});
self.val().length
нужно сравнивать с self.data('number')
?
self.data('number')
.
Вы можете использовать атрибут autofocus
для вашего элемента ввода, который является простым HTML5.
$('input.navigable[data-number="' + num +'"]').prop('autofocus', true);
Пытаться
Селектор выбора атрибута [name = "value"]
$('input.navigable[data-number="1"]').focus();
$('.navigable').keyup(function () {
var self = $(this);
var next = $('input.navigable[data-number="' + (self.data('number')+1) + '"]');
if (next.length > 0 && self.val().length == self.data('number')) {
next.focus();
}
});
maxsize
?