取消HTML中的按键按下事件

Question

如何在 HTML 页面中取消特定按键（例如空格、回车和箭头）的 keydown 事件？

- Jack

Answer 1

如果你只对所提到的示例键感兴趣，那么keydown事件就可以胜任，除了早期、基于Blink之前版本的Opera（至少包括版本12），在其中你需要取消keypress事件。在keydown事件中更容易可靠地识别非打印键，因此以下代码使用变量在keydown处理程序中设置，以告诉keypress处理程序是否应抑制默认行为。

使用addEventListener代码示例，并忽略古老版本的Opera

document.addEventListener("keydown", function(evt) {
    // These days, you might want to use evt.key instead of keyCode
    if (/^(13|32|37|38|39|40)$/.test("" + evt.keyCode)) {
        evt.preventDefault();
    }
}, false);

2010年的原始示例代码

var cancelKeypress = false;

document.onkeydown = function(evt) {
    evt = evt || window.event;
    cancelKeypress = /^(13|32|37|38|39|40)$/.test("" + evt.keyCode);
    if (cancelKeypress) {
        return false;
    }
};

/* For pre-Blink Opera */
document.onkeypress = function(evt) {
    if (cancelKeypress) {
        return false;
    }
};

- Tim Down

---

+1，我删除了我的答案，支持这个答案，我不知道Opera的问题 :-) - Andy E

@RobertKoritnik：我刚试了一下，它不适用于最新版本的Opera。我猜它也不适用于任何基于Blink的Opera版本。 - Tim Down

谢谢。我只是想确认一下，因为我正在编写处理按键取消的代码，不想安装Opera来检查这个问题。 - Robert Koritnik

无法工作... - Epic Speedy

@EpicSpeedy 例子？ 我猜你正在使用addEventListener（“ keydown”）而不是onkeydown，在这种情况下，您需要使用evt.preventDefault()而不是return false。 - Tim Down

Answer 2

捕获 keydown 事件并返回 false。代码应该类似于：

<script>
document.onkeydown = function(e){
  var n = (window.Event) ? e.which : e.keyCode;
  if(n==38 || n==40) return false;
}
</script>

(点击此处查看)

按键代码在这里定义 这里 编辑：更新我的答案以在IE中工作。

- marcgg

---

window.captureEvents已经过时，并且在较新版本的Firefox中已被删除，而且从未被一些其他浏览器支持。请参阅https://developer.mozilla.org/en/DOM/window.captureEvents。 - Andy E

@andy，@tim：对不起，我盲目地复制和粘贴了。我纠正了我的答案。现在@tim的回答当然是最快和更准确的。 - marcgg

preventDefault函数对我有效。 - Yasin UYSAL

Answer 3

这是一个非常古老的帖子。 要在IE10和Firefox 29.0.1中进行魔法操作，你必须在 keypress （而不是 keydown ）事件监听函数内执行此操作。

if (e.preventDefault) e.preventDefault();

- Nebojša Gojnić

---

在这里运行...... - Epic Speedy

Answer 4

在编程中，jQuery提供了一个不错的KeyPress函数，能够帮助你检测按键操作。之后，只需检测键值并为需要忽略的键添加if语句即可。

例如：

$('#target').keypress(function(event) {
  if (event.keyCode == '13') {
     return false; // or event.preventDefault();
  }
});

- Luke Duddridge

---

根据他设置的标签，显然他没有使用jQuery。 - marcgg

我使用ASP.NET，同时使用jQuery没有问题。 - Jack

@Luke：jQuery是否规范化了“keypress”事件？它在不同的浏览器中表现不同，所以我很想知道jQuery是否解决了这些差异。 - Andy E

@Andy E的头脑：我非常相信jQuery的所有事情，但我不是专家。从我所读的内容来看，我相当确定jQuery是跨浏览器的，并且根据他们的网站支持IE6+ FF2+ Chrome和Safari。如果按键事件有不同的行为，我相信他们已经解决了这个问题。 - Luke Duddridge

Answer 5

我只开发IE浏览器，因为我的工作需要它，所以这是我的数字字段代码，虽然不太美观但是运行得很好

    $(document).ready(function () {

    $("input[class='numeric-field']").keydown(function (e) {

        if (e.shiftKey == 1) {
            return false
        }

        var code = e.which;
        var key;

        key = String.fromCharCode(code);

        //Keyboard numbers   
        if (code >= 48 && code <= 57) {
            return key;
        } //Keypad numbers
        else if (code >= 96 && code <= 105) {
            return key
        } //Negative sign
        else if (code == 189 || code == 109) {
            var inputID = this.id;
            var position = document.getElementById(inputID).selectionStart
            if (position == 0) {
                return key
            }
            else {
                e.preventDefault()
            }
        }// Decimal point
        else if (code == 110 || code == 190) {
            var inputID = this.id;
            var position = document.getElementById(inputID).selectionStart

            if (position == 0) {
                e.preventDefault()
            }
            else {
                return key;
            }
        }// 37 (Left Arrow), 39 (Right Arrow), 8 (Backspace) , 46 (Delete), 36 (Home), 35 (End)
        else if (code == 37 || code == 39 || code == 8 || code == 46 || code == 35 || code == 36) {
            return key
        }
        else {
            e.preventDefault()
        }
    });

});

- Alexis J. Normandia

---

很抱歉，这不是数字字段博客。抱歉。 - Alexis J. Normandia

Answer 6

只需返回 false。请注意，在 Opera 上，这种方法不起作用。您可能需要改用 onkeyup，并检查最后输入的字符并进行处理。 或者更好地使用 JQuery KeyPress。

- redben