用户按Enter键时如何触发Tab [英] How to trigger a Tab when user presses Enter
问题描述
我从这里得到了代码 jquery如何捕捉输入密钥并将事件更改为标签
(function($) {
$.fn.enterAsTab = function(options) {
var settings = $.extend({
'allowSubmit': false
}, options);
this.find('input, select, textarea, button').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);
我的问题是:
-
我希望这个脚本也适用于select(下拉列表),textarea,按钮[不带type = submit]。它在textarea上工作得很好,按钮[不是类型=提交]但它不能用于选择(下拉列表)。
I want this script also work on select (dropdown), textarea, button[not with type=submit]. It is working great on textarea, and buttons[not with type=submit] but it is not working with select(dropdown).
我发现这个传递禁用的输入时,脚本无法移动到下一个输入。例如,我有三个输入,qty,qtyConv和备忘录。所有这些都是文本字段,但qtyConv被禁用。当我在数量上并按下回车键时,我无法转到备忘录。
I found out that this script failed to move to next input when passing a disabled input. For example I have three input, qty, qtyConv and memo. all of them are textfields, but qtyConv is disabled. When I am in qty and I press enter, I could not move to memo.
任何有助于改进此脚本的帮助满足我的要求?
Any help to improve this script to meet my requirements?
提前谢谢。
Daniel
推荐答案
一些事情 -
-
选择器使用错误。在查找未禁用的选择器方面定义的选择器是错误的,请使用此选项 -
Selector being used is wrong. The selector defined is wrong in terms of looking for the not disabled ones, use this one instead -
$(this).parents("form").eq(0).find(":input:visible:not(:disabled):not([readonly])");
Firefox 29.0 有关于按键的错误选择输入,使用keydown - 选择在firefox中不起作用,因为它在选择输入时不会听到按键的错误(或不是错误) - https://support.mozilla.org/en-US/questions/998291 。
Firefox 29.0 has a bug with keypress on select inputs, use keydown instead - Select is not working for you in firefox due to a bug (or not a bug) where they don't listen to keypress when its on a select input - https://support.mozilla.org/en-US/questions/998291.
工作演示 - http://codepen.io/nitishdhar/pen/Gxbhm (也适用于chrome& FF)
WORKING DEMO - http://codepen.io/nitishdhar/pen/Gxbhm (works in chrome & FF as well)
完成代码
(function($) {
$.fn.enterAsTab = function(options) {
var settings = $.extend({
'allowSubmit': false
}, options);
$(this).find('input, select, textarea, button').live("keydown", {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);
$("#form").enterAsTab({ 'allowSubmit': true});
这篇关于用户按Enter键时如何触发Tab的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!