jQuery jquery如何捕捉回车键并将事件更改为选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2335553/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery how to catch enter key and change event to tab
提问by payling
I want a jquery solution, I must be close, what needs to be done?
我想要一个jquery解决方案，我必须接近，需要做什么？
$('html').bind('keypress', function(e)
{
if(e.keyCode == 13)
{
return e.keyCode = 9; //set event key to tab
}
});
I can return false and it prevents the enter key from being pressed, I thought I could just change the keyCode to 9 to make it tab but it doesn't appear to work. I've got to be close, what's going on?
我可以返回 false 并防止按下 Enter 键，我以为我可以将 keyCode 更改为 9 以使其成为选项卡，但它似乎不起作用。我必须靠近，这是怎么回事？
回答by Sarfraz
$('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;
}
});
回答by Bharat
This works perfect!
这工作完美！
$('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();
}
});
回答by rpearce
Why not something simple like this?
为什么不是这样简单的事情？
$(document).on('keypress', 'input', function(e) {
if(e.keyCode == 13 && e.target.type !== 'submit') {
e.preventDefault();
return $(e.target).blur().focus();
}
});
This way, you don't trigger the submit unless you're focused on the input type of "submit" already, and it puts you right where you left off. This also makes it work for inputs which are dynamically added to the page.
这样，除非您已经专注于“提交”的输入类型，否则您不会触发提交，并且它会将您放在上次停下的地方。这也使其适用于动态添加到页面的输入。
Note: The blur() is in front of the focus() for anyone who might have any "on blur" event listeners. It is not necessary for the process to work.
注意：对于可能有任何“on blur”事件侦听器的任何人， blur() 位于 focus() 之前。该过程没有必要工作。
回答by Joel Purra
PlusAsTab: A jQuery plugin to use the numpad plus key as a tab key equivalent.
PlusAsTab：一个 jQuery 插件，用于使用数字键盘加键作为 Tab 键等价物。
PlusAsTab is also configurable to use the enter key as in this demo. See some of myolder answersto this question.
PlusAsTab 也可配置为使用本演示中的回车键。请参阅我对这个问题的一些较早的回答。
In your case, replacing the enter key with tab functionality for the entire page (after setting the enter key as tab in the options).
在您的情况下，将整个页面的回车键替换为制表符功能（在选项中将回车键设置为制表符后）。
<body data-plus-as-tab="true">
...
</body>
回答by Manuel Guzman
Building from Ben's plugin this version handles select and you can pass an option to allowSubmit. ie. $("#form").enterAsTab({ 'allowSubmit': true});This will allow enter to submit the form if the submit button is handling the event.
从 Ben 的插件构建此版本处理选择，您可以将选项传递给 allowSubmit。IE。$("#form").enterAsTab({ 'allowSubmit': true});如果提交按钮正在处理事件，这将允许输入提交表单。
(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 );
回答by Ben Roberts
I wrote the code from the accepted answer as a jQuery plugin, which I find more useful. (also, it now ignores hidden, disabled, and readonly form elements).
我将接受的答案中的代码编写为 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;
};
This way I can do $('#form-id').enterAsTab(); ... Figured I'd post since no one has posted it as a $ plugin yet and they aren't entirely intuitive to write.
这样我就可以做 $('#form-id').enterAsTab(); ...我想我会发布，因为还没有人将它作为 $ 插件发布，而且编写起来并不完全直观。
回答by Kamran Ahmed
Here is what I've been using:
这是我一直在使用的：
$("[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();
}
});
Pays attention to the tabindexand is not specific to the form but to the whole page.
注意 tabindex并且不特定于表单而是针对整个页面。
Notelivehas been obsoleted by jQuery, now you should be using on
注意live已被 jQuery 废弃，现在您应该使用on
回答by Metin
This is at last what is working for me perfectly. I am using jqeasyui and it is working fine
这终于对我有用了。我正在使用 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();
}
}
});
回答by pmereles
Includes all types of inputs
包括所有类型的输入
$(':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();
}
});
回答by TSG
I took the best of the above and added the ability to work with any input, outside of forms, etc. Also it properly loops back to start now if you reach the last input. And in the event of only one input it blurs then refocuses the single input to trigger any external blur/focus handlers.
我充分利用了上述内容，并添加了处理任何输入、表单外等的功能。如果您到达最后一个输入，它也会正确地循环回到现在开始。如果只有一个输入，它会模糊然后重新聚焦单个输入以触发任何外部模糊/焦点处理程序。
$('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();
}
}
});
