一个键的默认动作是在keydown
事件期间执行的,所以很自然地,随着时间的推移keyup
,Tab 键已经将焦点转移到下一个字段。
您可以使用:
jQuery(document).ready(function() {
$('#firstfield, #secondfield').on({
"keydown": function(e) {
if (e.which == 9) {
alert("TAB key for " + $(this).attr("id") + " .keydown() called.");
}
},
"keyup": function(e) {
if (e.which != 9) {
alert("Handler for " + $(this).attr("id") + " .keyup() called.");
}
}
});
});
这样,如果按下 Tab 键,您可以在处理其他键之前进行任何必要的调整。请参阅您更新的小提琴以获取示例。
编辑
根据您的评论,我修改了该功能。JavaScript 最终变得有点复杂,但我会尽力解释。在此处跟随新的演示。
jQuery(document).ready(function() {
(function($) {
$.fn.keyAction = function(theKey) {
return this.each(function() {
if ($(this).hasClass("captureKeys")) {
alert("Handler for " + $(this).attr("id") + " .keyup() called with key "+ theKey + ".");
// KeyCode dependent statements go here.
}
});
};
})(jQuery);
$(".captureKeys").on("keydown", function(e) {
$("*").removeClass("focus");
$(this).addClass("focus");
});
$("body").on("keyup", "*:focus", function(e) {
if (e.which == 9) {
$(".focus.captureKeys").keyAction(e.which);
$("*").removeClass("focus");
}
else {
$(this).keyAction(e.which);
}
});
});
基本上,你给class="captureKeys"
你想要监控按键的任何元素。首先看第二个函数:当keydown
你的一个元素被触发时captureKeys
,它被赋予了一个名为focus
. 这只是为了跟踪最近的元素以获得焦点(我.focus
在演示中给出了背景作为视觉辅助)。因此,无论按下什么键.focus
,只要它也有.captureKeys
.
接下来,当在任何地方(不仅仅是元素)keyup
触发时,该函数会检查它是否是一个选项卡。如果是,那么焦点已经转移,并且在最后一个获得焦点的元素上调用自定义函数 ( )。如果它不是选项卡,则在当前元素上调用 then (但同样,仅当它具有 时)。.captureKeys
.keyAction()
.focus
.keyAction()
.captureKeys
这应该达到你想要的效果。您可以使用函数中的变量theKey
来keyAction()
跟踪按下了哪个键,并采取相应的行动。
对此的一个主要警告:如果一个.captureKeys
元素是 DOM 中的最后一个元素,则在大多数浏览器中按 Tab 键会从文档中移除焦点,并且该keyup
事件永远不会触发。这就是我在演示底部添加虚拟链接的原因。
这提供了一个基本框架,因此您可以根据需要对其进行修改。希望能帮助到你。