专注于下一个输入（jquery）
我有四个输入，每个输入一个数字。 我想要做的是在设置数字后自动将焦点设置为下一个输入。 他们都有类“输入”。
这不太奏效：
$(".inputs").keydown(function () { $(this).next().focus(); }); 我建议将maxlength设置为每个文本框1，并在val.length和maxlength同时切换到下一个文本框。
DEMO
$(".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, etc 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; } }); });
DEMO
这将只是获得下一个元素，无论它是什么。 你可能想要：
$(".inputs").keyup(function () { $(this).next(".inputs").focus(); });
此外，键入不是keydown或它会很快改变。
试试这个
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(); } });
在搜索和开发之后，我最终得到了一个交叉浏览器片段，这使得可以根据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：
下面是我用来使输入键表现为制表符的代码，即按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();
使用keyup例如
$(".inputs").keyup(function () { $(this).next().focus(); });
在行动中查看它http://jsfiddle.net/qygB2/
如果您使用的是最新的jQuery版本，我强烈建议您使用on方法。 如果你转到jQuery源代码，你会注意到所有其他事件方法现在都重定向到这个方法，所以为什么不直接使用它：
$(document).ready(function () { $('.inputs').on('keyup', function(){ $(this).next().focus(); }) });
在使用next而不命名类或id之后，这将继续关注文本框。
$(this).hide(); $(this).next().show(); $('input[type=text]').focus();
以@ 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; } });
如果用户点击已经有值的输入，它将覆盖它，而不是转到下一个输入，它也只会关注文本输入。 我有一种情况，我在文本输入旁边有一个提交输入，如果使用退格可能会意外地重定向页面。
如果你只是想查看下一个输入，但你已经像这样说了分隔符
/ /
您需要使用此代码来获取所有下一个项目并确定找到的第一个输入：
$('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(); } } }