我从这里得到代码 jquery how to catch enter key and change event to tab
(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);
我的问题是:
我希望此脚本也适用于选择(下拉)、文本区域、按钮[不适用于 type=submit]。它在文本区域和按钮上工作得很好[不适用于 type=submit] 但它不适用于 select(dropdown)。
我发现此脚本在传递禁用的输入时无法移动到下一个输入。例如我有三个输入,qty、qtyConv 和 memo。它们都是文本字段,但禁用了 qtyConv。当我输入数量并按回车键时,我无法移动到备忘录。
是否可以帮助改进此脚本以满足我的要求?
提前谢谢你。
丹尼尔
解决方案:按照 Nitish Dhar 的建议,使用 keydown 而不是 keypress。
最佳答案
几件事 -
-
使用的
Selector 是错误的。定义的选择器在寻找未禁用的选择器方面是错误的,请改用这个 -
$(this).parents("form").eq(0).find(":input:visible:not(:disabled):not([readonly])");
Firefox 29.0 有一个按键选择错误 输入,使用 keydown - Select 在 firefox 中不适合你由于一个错误(或不是错误),他们在选择输入时不听按键 - https://support.mozilla.org/en-US/questions/998291 .
工作演示 - http://codepen.io/nitishdhar/pen/Gxbhm (也适用于 chrome 和 FF)
完整代码
(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});
关于javascript - 如何在用户按 Enter 时触发 Tab,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23887544/