Firefox 中奇怪的 CTRL 键检测

Question

我的一个页面上有一个输入，上面有侦听器，它们对输入的值执行格式化。

该字段只允许某些输入（数字以及某些其他字符），这由按键和按键监听器控制。 keypress 可以防止非法输入，keyup 会执行格式化（并且还会检查输入，以防用户将某些内容粘贴到字段中而不是键入）。

它在 Chrome 和 IE 中运行良好（回到 IE8，我不关心之前的任何事情），但在 Firefox 中我无法使用 tab 键，arrow kbd> 键，backspace，并且无法使用 ctrl+c/v

复制或粘贴>

经过一番调查，我发现问题出在这个监听器上：

$(this).keypress(function(e) { consumeIllegalFloatKeyPress(e); });

在 IE 和 Chrome 中，像 tab、arrows 和 backspace 这样的键甚至不会触发侦听器，而像 这样的按键当与 ctrl 键一起使用时，v 和 c 也不会触发它。但是，在 FF 中，它会拾取所有按键，从而导致 consumeIllegalFloatKeyPress(e); 接到电话，发现按键是非法的。

修复很简单 - 我有一组合法输入用于检查应该允许的内容，所以我只添加了 v 和 c 的字符代码，并为ctrlKey 输入一个密钥。

我感到困惑的是，为什么这些在不同浏览器中的处理方式不同？我认为，因为它都是 javascript，所以它会在所有浏览器中处理相同的 CTRL 键。

如果有人对此有任何信息，或者知道我可以在哪里阅读更多信息，我将非常感兴趣并感激不尽！

Answer 1

尝试以下解决方案。这非常适合我的问题

function captureKeyPress(e) {
    var keycode = (e.keyCode ? e.keyCode : e.which);
    var ctrlKeyPressed = e.ctrlKey;
    var key = e.which;
    switch(e.key){
      case "c": //right arrow key
        if (!ctrlKeyPressed) {
          alert('C pressed');
        }
        break;
    }
}

window.addEventListener("keypress", captureKeyPress);

Answer 2

我们看一下官方文档：

jQuery keypress listener

2 重要的事情可以在这里阅读：

注意：由于任何官方规范都没有涵盖按键事件，因此使用它时遇到的实际行为可能因浏览器、浏览器版本和平台而异。

还有：

此方法是前两个变体中 .on( "keypress", handler ) 和第三个变体中 .trigger( "keypress" ) 的快捷方式。

让我们看看 Javascript 文档中关于按键的内容：

javascript keypress event

点击几下后，我们在this page 上看到了一张漂亮的表格

该表显示了哪些浏览器接受某些键，例如不可打印键（箭头键、控制键、向下翻页等），哪些不接受。

您的问题的最终答案是：如果某事（如按键事件）没有设定标准，那么浏览器将做他们想做的任何事情。对于 Google chrome，这意味着它允许 CTRL + V，Mozilla Firefox 会在其中过滤它。

Answer 3

请试试这个解决方案：

$(document).on("keypress", this, function (e) {
    var keycode = (e.keyCode ? e.keyCode : e.which);
    /* Example */
    if (keycode === 27) {
         alert("Escape key");
    }
});

...您可以根据需要启用或禁用键。

我会给你一个我的功能：

功能：

$.fn.pKey = function (key, callback) {
    var key=key;
    return this.each(function () {
        $(document).on("keypress", this, function (e) {
            var keycode = (e.keyCode ? e.keyCode : e.which);
            if (keycode === key) {
                callback.call(this, e);
            };
        });
    });
};

示例：

$("#my-div").pKey(17,function (e) {
    /* disable CTRL*/
    e.preventDefault();
})