jquery如何捕捉回车键并将事件更改为选项卡
[英]jquery how to catch enter key and change event to tab
问题描述
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.我可以返回 false 并防止按下 Enter 键，我以为我可以将 keyCode 更改为 9 以使其成为选项卡，但它似乎不起作用。 I've got to be close, what's going on?我必须靠近，这是怎么回事？
20 个解决方案
解决方案1
77 已采纳 2010-02-25 16:21:12
Here is a solution : 这是一个解决方案：
$('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;
}
});
解决方案2
33 2011-05-25 17:48:12
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();
}
});
解决方案3
9 2013-05-27 21:24:08
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.注意：对于可能有任何“on blur”事件侦听器的任何人， blur() 位于 focus() 之前。 It is not necessary for the process to work.该过程没有必要工作。
解决方案4
7 2012-04-30 19:27:50
PlusAsTab : A jQuery plugin to use the numpad plus key as a tab key equivalent.
PlusAsTab is also configurable to use the enter key as in this demo . PlusAsTab 也可配置为使用本演示中的回车键。 See some of my older answers to this question .请参阅我对这个问题的一些较早的回答。
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>
解决方案5
5 2012-04-05 22:24:11
Building from Ben's plugin this version handles select and you can pass an option to allowSubmit.从 Ben 的插件构建此版本处理选择，您可以传递一个选项以允许提交。 ie. IE。 $("#form").enterAsTab({ 'allowSubmit': true}); This will allow enter to submit the form if the submit button is handling the event.如果提交按钮正在处理事件，这将允许输入提交表单。
(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 );
解决方案6
4 2012-04-05 03:25:25
I wrote the code from the accepted answer as a jQuery plugin, which I find more useful.我将接受的答案中的代码编写为 jQuery 插件，我发现它更有用。 (also, it now ignores hidden, disabled, and readonly form elements). （此外，它现在忽略隐藏、禁用和只读的表单元素）。
$.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();这样我就可以做 $('#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. ...我想我会发布，因为还没有人将它作为 $ 插件发布，而且编写起来并不完全直观。
解决方案7
4 2013-10-19 08:01:00
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 tabindex and is not specific to the form but to the whole page.注意 tabindex并且不特定于表单而是针对整个页面。
Note live has been obsoleted by jQuery, now you should be using on注意live已经被 jQuery 废弃了，现在你应该使用on
解决方案8
4 2013-11-03 07:55:44
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();
}
}
});
解决方案9
3 2014-06-12 14:05:52
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();
}
});
解决方案10
2 2013-03-14 21:12:25
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();
}
}
});
解决方案11
2 2011-04-03 21:29:53
This is my solution, feedback is welcome.. :)这是我的解决方案，欢迎反馈.. :)
$('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
});
解决方案12
1 2012-03-16 23:31:53
These solutions didn't work with my datagrid.这些解决方案不适用于我的数据网格。 I was hoping they would.我希望他们会。 I don't really need Tab or Enter to move to the next input, column, row or whatever.我真的不需要 Tab 或 Enter 来移动到下一个输入、列、行或其他任何东西。 I just need Enter to trigger .focusout or .change and my datagrid updates the database.我只需要 Enter 触发 .focusout 或 .change 并且我的数据网格更新数据库。 So I added the "enter" class to the relevant text inputs and this did the trick for me:所以我将“输入”类添加到相关的文本输入中，这对我有用：
$(function() {
if ($.browser.mozilla) {
$(".enter").keypress(checkForEnter);
} else {
$(".enter").keydown(checkForEnter);
}
});
function checkForEnter(event) {
if (event.keyCode == 13) {
$(".enter").blur();
}
}
解决方案13
0 2013-08-11 03:05:18
I know this question is older than god, but I never saw an answer that was all that elegant.我知道这个问题比上帝还古老，但我从未见过如此优雅的答案。
doc.on('keydown', 'input', function(e, ui) {
if(e.keyCode === 13){
e.preventDefault();
$(this).nextAll('input:visible').eq(0).focus();
}
});
that seems to get the job done in as few lines as humanly possible.这似乎可以在尽可能少的行内完成工作。
解决方案14
0 2010-03-16 03:09:08
$('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;
}
});
visible input cann't be focused.可见输入无法聚焦。
解决方案15
0 2016-12-23 08:29:04
you should filter all disabled and readonly elements.您应该过滤所有禁用和只读的元素。 i think this code should not cover buttons我认为这段代码不应该覆盖按钮
$('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;
}
});
解决方案16
0 2017-05-21 09:09:02
I had the same requirement in my development so I did research on this.我在开发中也有同样的要求，所以我对此进行了研究。 I have read many articles and tried many solutions during last two days like jQuery.tabNext() plugin.在过去的两天里，我阅读了许多文章并尝试了许多解决方案，例如 jQuery.tabNext() 插件。
I had some trouble with IE11 (all IE version has this bug).我在使用 IE11 时遇到了一些麻烦（所有 IE 版本都有这个错误）。 When an input text followed by non text input the selection was not cleared.当输入文本后跟非文本输入时，选择不会被清除。 So I have created my own tabNext() method based on @Sarfraz solution suggestion.所以我根据@Sarfraz 解决方案建议创建了自己的 tabNext() 方法。 I was also thinking on how it should behave (only circle in the current form or maybe through the full document).我也在考虑它应该如何表现（仅在当前形式中圈出或通过完整文档圈出）。 I still did not take care of the tabindex property mostly because I am using it occasionally.我仍然没有照顾 tabindex 属性，主要是因为我偶尔会使用它。 But I will not forget it.但我不会忘记它。
In order to my contribution can be useful for everybody easily I have created jsfiddle example here https://jsfiddle.net/mkrivan/hohx4nes/为了我的贡献可以轻松地对每个人有用，我在这里创建了 jsfiddle 示例https://jsfiddle.net/mkrivan/hohx4nes/
I include also the JavaScript part of the example here:我还包括示例的 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;
I left commented rows as well so my thinking can be followed.我也留下了评论行，以便可以遵循我的想法。
解决方案17
0 2018-04-04 11:13:29
I know this is rather old, but I was looking for the same answer and found that the chosen solution did not obey the tabIndex.我知道这很旧，但我一直在寻找相同的答案，发现所选的解决方案不遵守 tabIndex。 I have hence modified it to the following which works for me.因此，我将其修改为以下对我有用的内容。 Please note that maxTabNumber is a global variable that holds the maximum number of tabbable input fields请注意，maxTabNumber 是一个全局变量，用于保存可选项卡输入字段的最大数量
$('input').on("keypress", function (e) { if (e.keyCode == 13) { var inputs = $(this).parents("form").eq(0).find(":input"); var idx = inputs.index(this); var tabIndex = parseInt($(this).attr("tabindex")); tabIndex = (tabIndex + 1) % (maxTabNumber + 1); if (tabIndex == 0) { tabIndex = 1; } $('[tabindex=' + tabIndex + ']').focus(); $('[tabindex=' + tabIndex + ']').select(); return false; } });解决方案18
0 2019-03-12 01:07:19
Here's a jQuery plugin I wrote that handles enter key as a callback or as a tab key (with an optional callback):这是我编写的一个 jQuery 插件，它将 enter 键处理为回调或 tab 键（带有可选的回调）：
$(document).ready(function() { $('#one').onEnter('tab'); $('#two').onEnter('tab'); $('#three').onEnter('tab'); $('#four').onEnter('tab'); $('#five').onEnter('tab'); }); /** * jQuery.onEnter.js * Written by: Jay Simons * Cloudulus.Media (https://code.cloudulus.media) */ if (window.jQuery) { (function ($) { $.fn.onEnter = function (opt1, opt2, opt3) { return this.on('keyup', function (e) { var me = $(this); var code = e.keyCode ? e.keyCode : e.which; if (code == 13) { if (typeof opt1 == 'function') { opt1(me, opt2); return true; }else if (opt1 == 'tab') { var eles = $(document).find('input,select,textarea,button').filter(':visible:not(:disabled):not([readonly])'); var foundMe = false; var next = null; eles.each(function(){ if (!next){ if (foundMe) next = $(this); if (JSON.stringify($(this)) == JSON.stringify(me)) foundMe = true; } }); next.focus(); if (typeof opt2 === 'function') { opt2(me, opt3); } return true; } } }).on('keydown', function(e){ var code = e.keyCode ? e.keyCode : e.which; if (code == 13) { e.preventDefault(); e.stopPropagation(); return false; } }); } })(jQuery); } else { console.log("onEnter.js: This class requies jQuery > v3!"); }
input, select, textarea, button { display: block; margin-bottom: 1em; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input id="one" type="text" placeholder="Input 1" /> <input id="two" type="text" placeholder="Input 2" /> <select id="four"> <option selected>A Select Box</option> <option>Opt 1</option> <option>Opt 2</option> </select> <textarea id="five" placeholder="A textarea"></textarea> <input id="three" type="text" placeholder="Input 3" /> <button>A Button</button> </form>
解决方案19
0 2020-03-10 14:03:59
I need to go next only to input and select, and element have to be focusable.我只需要输入和选择下一步，并且元素必须是可聚焦的。 This script works better for me:这个脚本更适合我：
$('body').on('keydown', 'input, select', function(e) {
if (e.key === "Enter") {
var self = $(this), form = self.parents('form:eq(0)'), focusable, next;
focusable = form.find('input,select,textarea').filter(':visible');
next = focusable.eq(focusable.index(this)+1);
if (next.length) {
next.focus();
} else {
form.submit();
}
return false;
}
});
Maybe it helps someone.也许它可以帮助某人。
解决方案20
-1 2016-05-04 22:05:11
If you're using IE, this worked great for me:如果您使用的是 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.