jquery如何捕捉input键并将事件更改为选项卡
我想要一个jQuery的解决scheme，我必须接近，需要做什么？
$('html').bind('keypress', function(e) { if(e.keyCode == 13) { return e.keyCode = 9; //set event key to tab } }); 我可以返回false，它可以防止input键被按下，我想我可以将keyCode更改为9，使其选项卡，但它似乎不工作。 我必须靠近，发生了什么事？
这是一个解决scheme：
$('input').on("keypress", function(e) { /* ENTER PRESSED*/ if (e.keyCode == 13) { /* FOCUS ELEMENT */ var inputs = $(this).parents("form").eq(0).find(":input"); var idx = inputs.index(this); if (idx == inputs.length - 1) { inputs[0].select() } else { inputs[idx + 1].focus(); // handles submit buttons inputs[idx + 1].select(); } return false; } });
这工作完美！
$('input').keydown( function(e) { var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0; if(key == 13) { e.preventDefault(); var inputs = $(this).closest('form').find(':input:visible'); inputs.eq( inputs.index(this)+ 1 ).focus(); } });
为什么不这样简单？
$(document).on('keypress', 'input', function(e) { if(e.keyCode == 13 && e.target.type !== 'submit') { e.preventDefault(); return $(e.target).blur().focus(); } });
这样，除非您专注于“提交”的inputtypes，否则不会触发提交，这会使您处于离开状态。 这也使它适用于dynamic添加到页面的input。
注意：blur（）位于focus（）的前面，对于任何可能有“on blur”事件侦听器的人。 这个过程没有必要工作。
PlusAsTab ：一个jQuery插件，使用数字键encryption键作为标签键的等价物。
PlusAsTab也可configuration为使用本演示中的Enter键 。 看到我 对这个问题的 一些 旧的答案 。
在你的情况下，用整个页面的标签functionreplace回车键（在选项中将回车键设置成标签后）。
<body data-plus-as-tab="true"> ... </body>
从本的插件build设这个版本处理select，你可以通过一个选项allowSubmit。 即。 $("#form").enterAsTab({ 'allowSubmit': true}); 如果提交button处理事件，这将允许input提交表单。
(function( $ ){ $.fn.enterAsTab = function( options ) { var settings = $.extend( { 'allowSubmit': false }, options); this.find('input, select').live("keypress", {localSettings: settings}, function(event) { if (settings.allowSubmit) { var type = $(this).attr("type"); if (type == "submit") { return true; } } if (event.keyCode == 13 ) { var inputs = $(this).parents("form").eq(0).find(":input:visible:not(disabled):not([readonly])"); var idx = inputs.index(this); if (idx == inputs.length - 1) { idx = -1; } else { inputs[idx + 1].focus(); // handles submit buttons } try { inputs[idx + 1].select(); } catch(err) { // handle objects not offering select } return false; } }); return this; }; })( jQuery );
我将接受的答案中的代码编写为一个jQuery插件，我发现它更有用。 （此外，它现在忽略隐藏的，禁用的和只读的表单元素）。
$.fn.enterAsTab = function () { $(this).find('input').live("keypress", function(e) { /* ENTER PRESSED*/ if (e.keyCode == 13) { /* FOCUS ELEMENT */ var inputs = $(this).parents("form").eq(0).find(":input:visible:not(disabled):not([readonly])"), idx = inputs.index(this); if (idx == inputs.length - 1) { inputs[0].select() } else { inputs[idx + 1].focus(); // handles submit buttons inputs[idx + 1].select(); } return false; } }); return this; };
这样我可以做$（'＃form-id'）。enterAsTab（）; …想我会发布，因为没有人已经把它作为一个$插件，但他们不是完全直观的写。
这终究是为我工作的完美。 我使用jqeasyui，它工作正常
$(document).on('keyup', 'input', function(e) { if(e.keyCode == 13 && e.target.type !== 'submit') { var inputs = $(e.target).parents("form").eq(0).find(":input:visible"), idx = inputs.index(e.target); if (idx == inputs.length - 1) { inputs[0].select() } else { inputs[idx + 1].focus(); inputs[idx + 1].select(); } } });
这是我的解决scheme，欢迎反馈.. 🙂
$('input').keydown( function (event) { //event==Keyevent if(event.which == 13) { var inputs = $(this).closest('form').find(':input:visible'); inputs.eq( inputs.index(this)+ 1 ).focus(); event.preventDefault(); //Disable standard Enterkey action } // event.preventDefault(); <- Disable all keys action });
这是我一直在使用的：
$("[tabindex]").addClass("TabOnEnter"); $(document).on("keypress", ".TabOnEnter", function (e) { //Only do something when the user presses enter if (e.keyCode == 13) { var nextElement = $('[tabindex="' + (this.tabIndex + 1) + '"]'); console.log(this, nextElement); if (nextElement.length) nextElement.focus() else $('[tabindex="1"]').focus(); } });
注意tabindex ， 并不是特定于表单，而是整个页面。
注意 live已被jQuery过时，现在你应该使用
我采取了上述的最好的，并增加了能够处理任何input，表格之外，等等。如果你到达最后的input，它现在正确地循环回来开始。 而且，如果只有一个input模糊，则会重新调整单个input以触发任何外部模糊/焦点处理程序。
$('input,select').keydown( function(e) { var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0; if(key == 13) { e.preventDefault(); var inputs = $('#content').find(':input:visible'); var nextinput = 0; if (inputs.index(this) < (inputs.length-1)) { nextinput = inputs.index(this)+1; } if (inputs.length==1) { $(this).blur().focus(); } else { inputs.eq(nextinput).focus(); } } });
这些解决scheme不适用于我的数据网格。 我希望他们会。 我真的不需要Tab或Enter来移动到下一个input，列，行或其他东西。 我只需要input来触发.focusout或.change，我的datagrid更新数据库。 所以我在相关的文本input中添加了“input”类，这对我来说是个窍门：
$(function() { if ($.browser.mozilla) { $(".enter").keypress(checkForEnter); } else { $(".enter").keydown(checkForEnter); } }); function checkForEnter(event) { if (event.keyCode == 13) { $(".enter").blur(); } }
包括所有types的input
$(':input').keydown(function (e) { var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0; if (key == 13) { e.preventDefault(); var inputs = $(this).closest('form').find(':input:visible:enabled'); if ((inputs.length-1) == inputs.index(this)) $(':input:enabled:visible:first').focus(); else inputs.eq(inputs.index(this) + 1).focus(); } });
$('input').live("keypress", function(e) { /* ENTER PRESSED*/ if (e.keyCode == 13) { /* FOCUS ELEMENT */ var inputs = $(this).parents("form").eq(0).find(":input:visible"); var idx = inputs.index(this); if (idx == inputs.length - 1) { inputs[0].select() } else { inputs[idx + 1].focus(); // handles submit buttons inputs[idx + 1].select(); } return false; } });
可见的input不能集中。
我知道这个问题比上帝还旧，但是我从来没有见过一个那么优雅的答案。
doc.on('keydown', 'input', function(e, ui) { if(e.keyCode === 13){ e.preventDefault(); $(this).nextAll('input:visible').eq(0).focus(); } });
这似乎能够完成尽可能less的人力工作。
你应该过滤所有禁用和只读元素。 我认为这个代码不应该覆盖button
$('body').on('keydown', 'input, select, textarea', function(e) { var self = $(this), form = self.parents('form:eq(0)'), submit = (self.attr('type') == 'submit' || self.attr('type') == 'button'), focusable, next; if (e.keyCode == 13 && !submit) { focusable = form.find('input,a,select,button,textarea').filter(':visible:not([readonly]):not([disabled])'); next = focusable.eq(focusable.index(this)+1); if (next.length) { next.focus(); } else { form.submit(); } return false; } });
我的发展也有同样的要求，所以我研究了这个。 我读了很多文章，并在过去两天尝试了很多解决scheme，如jQuery.tabNext（）插件。
IE11遇到了一些麻烦（所有的IE版本都有这个bug）。 当input文本后跟非文本input时，select不会被清除。 所以我创build了我自己的基于@Sarfraz解决schemebuild议的tabNext（）方法。 我也在考虑它应该如何行事（只以目前的forms或者通过完整的文件圈出来）。 我仍然没有照顾tabindex属性主要是因为我偶尔使用它。 但我不会忘记它。
为了我的贡献可以为大家轻松有用我已经在这里创build了jsfiddle的例子https://jsfiddle.net/mkrivan/hohx4nes/
我也包括这个例子的JavaScript部分：
function clearSelection() { if (document.getSelection) { // for all new browsers (IE9+, Chrome, Firefox) document.getSelection().removeAllRanges(); document.getSelection().addRange(document.createRange()); console.log("document.getSelection"); } else if (window.getSelection) { // equals with the document.getSelection (MSDN info) if (window.getSelection().removeAllRanges) { // for all new browsers (IE9+, Chrome, Firefox) window.getSelection().removeAllRanges(); window.getSelection().addRange(document.createRange()); console.log("window.getSelection.removeAllRanges"); } else if (window.getSelection().empty) { // maybe for old Chrome window.getSelection().empty(); console.log("window.getSelection.empty"); } } else if (document.selection) { // IE8- deprecated document.selection.empty(); console.log("document.selection.empty"); } } function focusNextInputElement(node) { // instead of jQuery.tabNext(); // TODO: take the tabindex into account if defined if (node !== null) { // stay in the current form var inputs = $(node).parents("form").eq(0).find(":input:visible:not([disabled]):not([readonly])"); // if you want through the full document (as TAB key is working) // var inputs = $(document).find(":input:visible:not([disabled]):not([readonly])"); var idx = inputs.index(node) + 1; // next input element index if (idx === inputs.length) { // at the end start with the first one idx = 0; } var nextInputElement = inputs[idx]; nextInputElement.focus(); // handles submit buttons try { // if next input element does not support select() nextInputElement.select(); } catch (e) { } } } function tabNext() { var currentActiveNode = document.activeElement; clearSelection(); focusNextInputElement(currentActiveNode); } function stopReturnKey(e) { var e = (e) ? e : ((event) ? event : null); if (e !== null) { var node = (e.target) ? e.target : ((e.srcElement) ? e.srcElement : null); if (node !== null) { var requiredNode = $(node).is(':input') // && !$(node).is(':input[button]') // && !$(node).is(':input[type="submit"]') && !$(node).is('textarea'); // console.log('event key code ' + e.keyCode + '; required node ' + requiredNode); if ((e.keyCode === 13) && requiredNode) { try { tabNext(); // clearSelection(); // focusNextInputElement(node); // jQuery.tabNext(); console.log("success"); } catch (e) { console.log("error"); } return false; } } } } document.onkeydown = stopReturnKey;
我留下评论行，所以我的想法可以遵循。
如果你使用IE浏览器，这对我来说非常有用：
<body onkeydown="tabOnEnter()"> <script type="text/javascript"> //prevents the enter key from submitting the form, instead it tabs to the next field function tabOnEnter() { if (event.keyCode==13) { event.keyCode=9; return event.keyCode } } </script>
