Javascript 选项卡上的键控事件行为

HTML:

演示：

在本演示中，如果将光标放在第一个字段中，然后进行制表（不做任何更改），则会在第二个字段上触发keyup事件。i、 例如，您正在从第一个字段切换到第二个字段。这种行为正确吗？我怎样才能防止这种情况发生？这同样适用于shift+tab

注:

a） 我相信所有其他键（可打印和不可打印）都会触发第一个字段上的keyup事件

---

b） 如果按住选项卡直到它移出两个字段，则不会触发事件。

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

焦点在第一个文本框上时按Tab键

在第一个文本框上触发按键按下事件

将焦点移动到第二个文本框

将手指提离凸耳键

在第二个文本框上触发Keyup事件

为第二个文本框触发“向上键”，因为自从焦点转移到该输入后，该文本框就是在该文本框中发生的

---

您无法阻止这一系列事件的发生，但您可以检查事件以查看按下的键，如果是tab键，则调用

preventDefault（）

。

键的默认操作是在

keydown

事件期间执行的，因此，当

keyup

传播时，Tab键已将焦点更改为下一个字段

您可以使用：

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

这样，如果按下Tab键，您可以在处理其他键之前进行任何必要的调整

编辑 根据你的评论，我修改了这个函数。JavaScript最终有点复杂，但我会尽力解释

基本上，您可以将

class=“captureKeys”

提供给要监视按键的任何元素。首先看第二个函数：当对一个

captureKeys

元素触发

keydown

时，它被赋予一个名为

focus

的伪类。这只是为了跟踪最新的元素以获得焦点（我在演示中为

.focus

提供了一个背景作为视觉辅助）。因此，无论按下哪个键，只要它还有

.captureKeys

，那么它所按下的当前元素都会被赋予

.focus

类

接下来，当

keyup

在任何地方被激发时（不仅仅是在

.captureKeys

元素上），函数检查它是否是一个选项卡。如果是，则焦点已经移动，并且对最后一个具有焦点的元素调用自定义

.keyAction（）

函数（

.focus

）。如果它不是一个选项卡，则对当前元素调用

.keyAction（）

（但是，同样，仅当它具有

.captureKeys

时）

这应该达到你想要的效果。您可以在

keyAction（）

函数中使用变量

theKey

，跟踪并相应地采取行动

对此有一个主要警告：如果

.captureKeys

元素是DOM中的最后一个元素，则在大多数浏览器中，按Tab键将从文档中移除焦点，并且

keyup

事件将永远不会触发。这就是为什么我在演示的底部添加了虚拟链接

---

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

我最终使用了以下解决方案：

HTML:

如果键为tab、shift或两者兼有，则此解决方案不会运行警报

---

解决方案：

我最近处理这个问题有一段时间了。我发现，如果要在原始字段中捕获keyup事件，可以侦听keydown事件，并在按下tab键时触发keyup事件

与此相反： 更改为：

---

您的解决方案在第一个字段中引入了一个额外的空格字符。另外，我只想避免tab和shift+tab上的键控事件。

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

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.");
            }
        }
    });
});

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);
        }
    });
});

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

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.');
    });
});

$(this).on({'keyup': function() {
                //run code here
            }
        });

$(this).on({'keydown': function(e) {
                // if tab key pressed - run keyup now
                if (e.keyCode == 9) {
                    $(this).keyup();
                    e.preventDefault;
                }
            },
            'keyup': function() {
                //run code here
            }
        });