23

我有四个输入，每个输入一个数字。我想要做的是在设置数字后自动将焦点设置到下一个输入。它们都有“输入”类。

这不太奏效：

$(".inputs").keydown(function () {

            $(this).next().focus();
        });
4

12 回答 12

59

我建议将每个文本框的 maxlength 设置为 1 并在val.length和 相同时切换到下一个maxlength。

演示

$(".inputs").keyup(function () {
    if (this.value.length == this.maxLength) {
      $(this).next('.inputs').focus();
    }
});

编辑：花了一些时间进行以下操作（未完全测试，但基本测试工作正常）

   1. Allowing just numeric chars  
   2. Allow some control like del, backspace, e.t.c
   3. Backspace on empty textbox will move to prev textbox
   4. charLimit var to dynamically decide how many char you want to restrict.

代码：

$(function() {
    var charLimit = 1;
    $(".inputs").keydown(function(e) {

        var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145];

        if (e.which == 8 && this.value.length == 0) {
            $(this).prev('.inputs').focus();
        } else if ($.inArray(e.which, keys) >= 0) {
            return true;
        } else if (this.value.length >= charLimit) {
            $(this).next('.inputs').focus();
            return false;
        } else if (e.shiftKey || e.which <= 48 || e.which >= 58) {
            return false;
        }
    }).keyup (function () {
        if (this.value.length >= charLimit) {
            $(this).next('.inputs').focus();
            return false;
        }
    });
});

演示

于 2012-05-10T17:27:29.150 回答
6

试试这个

jQuery.extend(jQuery.expr[':'], {
    focusable: function (el, index, selector) {
        return $(el).is('a, button, :input,[tabindex]');
    }
});
$(document).on('keypress', 'input,select', function (e) {
    if (e.which == 13) {
        e.preventDefault();
        // Get all focusable elements on the page
        var $canfocus = $(':focusable');
        var index = $canfocus.index(document.activeElement) + 1;
        if (index >= $canfocus.length) index = 0;
        $canfocus.eq(index).focus();
    }
});
于 2018-05-04T10:06:15.713 回答
5

这只会得到下一个元素，不管它是什么。你可能想要：

$(".inputs").keyup(function () {
  $(this).next(".inputs").focus();
});

另外，上键而不是下键，否则它会很快改变。

于 2012-05-10T17:20:10.030 回答
2

这是我用来使输入键充当制表符的代码，即在按下 Enter 键时聚焦到下一个元素或在按下 shift+Enter 时聚焦上一个元素。

1）本质上：

tabables = $("*[tabindex != '-1']:visible");
var index = tabables.index(element);
tabables.eq(index + 1).focus();

2）在这里，您是一个封装行为的“类”，考虑到向前和向后以及有效的可聚焦元素。

我希望它有所帮助，如果某些代码适合您的需求，请随时适应您的需求:)

EnterAsTab = function () {
    this.ENTER_KEY = 13;
};

EnterAsTab.prototype.init = function () {
    this.listenOnEnterKey();
};

EnterAsTab.prototype.listenOnEnterKey = function () {

    var me = this;
    $('form input').on('keypress', function (event) {

            if (event.which === me.ENTER_KEY) {

                if (!event.shiftKey)
                    me.findNextFocusableElement(this);
                else
                    me.findPreviousFocusableElement(this);

                event.preventDefault();
            }
        }
    );
};

EnterAsTab.prototype.findNextFocusableElement = function (element) {
    this.findFocusableElement(element, this.increaseIndex);
};

EnterAsTab.prototype.findPreviousFocusableElement = function (element) {
    this.findFocusableElement(element, this.decreaseIndex);
};

EnterAsTab.prototype.findFocusableElement = function (element, callable) {

    var tabables = $("*[tabindex != '-1']:visible");
    var index = tabables.index(element);
    var counter = 1;
    var nextElement = undefined;

    try {

        while (true) {

            if ((nextElement = tabables.eq(index + counter)).length === 0) {
                break;
            }

            if (this.isFocusableElement(nextElement)) {

                var newIndex = callable.call(this, index, counter);
                tabables.eq(newIndex).focus();

                break;
            } else {
                counter++;
            }
        }
    } catch (error) {
        console.log(error);
    }

};

EnterAsTab.prototype.increaseIndex = function (index, counter) {
    return (index + counter);
};

EnterAsTab.prototype.decreaseIndex = function (index, counter) {
    return index - counter;
};

EnterAsTab.prototype.isFocusableElement = function (element) {

    return ['SELECT', 'TEXTAREA'].indexOf(element.prop('tagName')) > -1 ||
        element.is(':text') ||
        element.is(':checkbox') ||
        element.is(':radio');
};

var enterAsTab = new EnterAsTab();
enterAsTab.init();
于 2017-10-31T11:41:59.580 回答
1

在搜索和开发之后，我最终得到了一个跨浏览器片段，它可以根据 maxlength（用 1 个字符测试）聚焦具有相同类的下一个输入字段，还可以通过退格按钮重新聚焦：

Javascript（jQuery）：

var codeCharInput = 'input.code-char';
$(codeCharInput+':first').focus();
$(codeCharInput).keyup(function(e) {
  if ((e.which == 8 || e.which == 46)) {
    $(this).prev(codeCharInput).focus().val($(this).prev().val());
  } else {
    if (this.value.length == this.maxLength) {
      $(this).next(codeCharInput).focus();
    }
  }
});

HTML：

<input type="text" name="chars[]" maxlength="1" class="code-char" />
<input type="text" name="chars[]" maxlength="1" class="code-char" />
<input type="text" name="chars[]" maxlength="1" class="code-char" />
<input type="text" name="chars[]" maxlength="1" class="code-char" />
于 2013-06-25T14:04:28.820 回答
1

如果您只想查看下一个输入，但您已经以这样的方式说分隔符

<input type="number" pattern="[0-9]*" inputmode="numeric" maxlength="2" placeholder="DD" name="dobday" id="dobday">
<div class="separator">/</div>
<input type="number" pattern="[0-9]*" inputmode="numeric" maxlength="2" placeholder="MM" name="dobmonth" id="dobmonth">
<div class="separator">/</div>
<input type="number" pattern="[0-9]*" inputmode="numeric" maxlength="4" placeholder="YYYY" name="dobyear" id="dobyear">

您将需要此代码来获取所有下一个项目并确定找到的第一个输入：

$('input#dobday,input#dobmonth,input#dobyear').on('input', function(e) {
    if (jQuery(this).val().length >= parseInt(jQuery(this).attr("maxlength"), 10)) {
            if (jQuery(this).attr('id') === 'dobyear') {
                jQuery(this).blur();
            } else {
                jQuery(this).nextAll('input:first').focus();
            }
    }
}
于 2018-05-22T10:07:56.703 回答
0

使用keyup例如

$(".inputs").keyup(function () {
    $(this).next().focus();
});​

在行动中查看它http://jsfiddle.net/qygB2/

于 2012-05-10T17:21:08.250 回答
0

如果您使用的是最新的 jQuery 版本，我强烈建议您使用该on方法。如果您查看 jQuery 源代码，您会注意到所有其他事件方法现在都重定向到此方法，所以为什么不直接使用它：

$(document).ready(function () {
        $('.inputs').on('keyup', function(){
            $(this).next().focus();
        })
});
于 2012-05-10T17:29:04.103 回答
0

在使用 next 而不命名类或 id 之后，这将继续关注文本框。

 $(this).hide();        
 $(this).next().show();
 $('input[type=text]').focus();
于 2013-07-09T09:31:04.487 回答
0

以@Vega 的回答为基础

inputs.keydown(function(e) {
    var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145];

    $(this).val('');

    if (e.which == 8 && this.value.length == 0) {
        $(this).prev(inputs).focus();
    } else if ($.inArray(e.which, keys) >= 0) {
        return true;
    } else if (this.value.length > charLimit) {
        $(this).next(inputs).focus();
        return false;
    } else if (e.shiftKey || e.which <= 48 || e.which >= 58) {
        return false;
    }
}).keyup (function () {
    if (this.value.length >= charLimit && $(this).next(inputs).attr('type') === 'text') {
        $(this).next(inputs).focus();
        return false;
    }
});

如果用户单击已经有值的输入，它将覆盖它，而不是转到下一个输入，它也将只关注文本输入。我有一种情况，我在文本输入旁边有一个提交输入，如果使用退格键可能会意外重定向页面。

于 2014-05-05T01:53:42.327 回答
0

这是满足您所有需求的代码。

$(".input").keyup(function(e) {

if (e.which == 8 || e.which == 46){ 
    //backspace / Delete
    $(this).val('');
    $(this).prevAll('input:first').focus();
}
else
{ 
    var spcl_arr = ["~","!","@", "#", "$", "%", "^", "&", "*", "(", ")", "+","-", "=", "." ,"/"];
   if(e.which == 13){ // Enter Kay
      return false;
   }
  else if(jQuery.inArray($(this).val(), spcl_arr) !== -1 ){ 
         $(this).val('');
         $(this).focus();
        return false;
   }else{ 
       var regex = new RegExp("^[a-zA-Z0-9]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) { 
             if (this.value.length == this.maxLength) {
                 $(this).next('.input').focus();
             }
        }else{
            $(this).val('');
            $(this).focus();
            return false;
        }
    }
}

});

于 2019-10-23T06:01:39.843 回答
0

这完美地工作它还检查中间输入是否已填充

$(".inputs").keyup( function () {

    if (this.value.length == this.maxLength) {
    var n=$(this).next('.inputs');
    n.focus();
   if(n.val().length==n.prop('maxlength')) n.next('.inputs').focus(); 
    }

});
于 2020-08-28T09:16:55.350 回答