选项卡上的Keyup事件行为

Question

HTML:

<form id="myform">
    <input id="firstfield" name="firstfield" value="100" type="text" />
    <input id="secondfield" name="secondfield" value="200" type="text" />
</form>

jQuery的:

jQuery(document).ready(function() {
    $('#firstfield').keyup(function() {
      alert('Handler for firstfield .keyup() called.');
    });
    $('#secondfield').keyup(function() {
      alert('Handler for secondfield .keyup() called.');
    });
});

演示:http://jsfiddle.net/KtSja/3/

在此演示中,如果将光标放在第一个字段中然后选项卡(不进行任何更改),则会在第二个字段上触发keyup事件.也就是说,你是从第一个领域到第二个领域的标签.这种行为是否正确？我怎样才能防止这种情况发生？同样适用于shift + tab.

注意:

a)我相信所有其他键,可打印和不可打印,在第一个字段上触发键盘事件.

b)如果按住标签直到它移出两个字段,则根本不会触发事件.

Answer 1

在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在任何地方(不仅仅是在.captureKeys元素上)触发时,该函数会检查它是否是标签.如果是,则焦点已经移动,并且.keyAction()在最后一个具有焦点(.focus)的元素上调用自定义函数.如果它不是制表符,则.keyAction()在当前元素上调用(但同样,只有它有.captureKeys).

这应该达到你想要的效果.您可以使用该变量theKey的keyAction()函数来跟踪该键被按下,并采取相应的行动.

一个主要的警告:如果.captureKeys元素是DOM中的最后一个元素,按Tab键将在大多数浏览器中从文档中删除焦点,并且keyup事件永远不会触发.这就是为什么我在演示的底部添加了虚拟链接.

这提供了一个基本框架,因此您可以根据自己的需要对其进行修改.希望能帮助到你.

Answer 2

这是预期的行为。如果我们看看发生的一系列事件：

1. 当焦点位于第一个文本框时按 Tab 键
2. 在第一个文本框上触发按键按下事件
3. 将焦点移至第二个文本框
4. 将手指从 Tab 键上抬起
5. Keyup 事件在第二个文本框上触发

为第二个文本框触发向上键，因为自从焦点转移到该输入后，它就出现在那里。

您无法阻止这一系列事件的发生，但您可以检查事件以查看按下了什么键，并调用preventDefault()它是否是 Tab 键。

Answer 3

我最终使用了这个解决方案：

HTML：

<form id="myform">
    <input id="firstfield" name="firstfield" value="100" type="text" />
    <input id="secondfield" name="secondfield" value="200" type="text" />
</form>

jQuery：

jQuery(document).ready(function () {
    $('#firstfield').keyup(function (e) {
        var charCode = e.which || e.keyCode; // for cross-browser compatibility
        if (!((charCode === 9) || (charCode === 16)))
            alert('Handler for firstfield .keyup() called.');
    });
    $('#secondfield').keyup(function (e) {
       var charCode = e.which || e.keyCode; // for cross-browser compatibility
       if (!((charCode === 9) || (charCode === 16)))
            alert('Handler for secondfield .keyup() called.');
    });
});

如果按键为 Tab、Shift 或两者兼而有之，此解决方案不会运行警报。

解决方案： http: //jsfiddle.net/KtSja/13/