javascript - 选项卡上的 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) 我相信所有其他可打印和不可打印的键都会在第一个字段上触发 keyup 事件。

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 键，您可以在处理其他键之前进行任何必要的调整。 See your updated fiddle for an exampe.

编辑

根据您的评论，我修改了函数。 JavaScript 最终有点复杂，但我会尽力解释。 Follow along with the new demo here.

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 时)。

这样应该可以达到你想要的效果。您可以在 keyAction() 函数中使用变量 theKey 来跟踪 which key was pressed ，并据此采取行动。

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

这提供了一个基本框架，因此您可以根据自己的需要对其进行修改。希望对您有所帮助。