Question

我试图使用jQuery专注于输入。我可以通过使用输入标记的id轻松完成此操作，但是这是从数据库字段设置为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">

提前致谢。

Answer 1

你的代码中有拼写错误。如果条件}，您忘记关闭。 self.attr('size')将返回undefined。因为您的输入中没有任何名为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();
    }
});

<强> DEMO

Answer 2

尝试

Attribute Equals Selector [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();
    }
});

Answer 3

您可以在输入元素上使用autofocus属性，这是纯HTML5。

$('input.navigable[data-number="' + num +'"]').prop('autofocus', true);

我将如何专注于使用jQuery的输入

3 个答案: