javascript - 如何在文本区域停用按键事件

Question

我正在编写一个 javascript 应用程序。我用过类似的东西

document.keypress = function(e) {
    switch(e.which){ 
    case 97: 
    alert('foobar');
    break;
    .......

它工作正常！现在，在 html 页面的某个地方，我有一个 textarea，现在，每当我输入a（即 ASCII 97）时，它alert就是（显然）。

问题是我如何防止这种情况发生？我的按键事件适用于除文本区域和文本字段之外的所有内容？

Answer 1

您可以使用该target属性来标识触发事件的元素。然后，用于tagName确定元素类型。

您可以使用其他属性type来确定它是否是文本字段。

document.keypress = function(e) {
var target = e.target;
var elementType = target.tagName.toLowerCase();
if (elementType != "textarea" && !(elementType =="input" && target.type =="text")) {
    switch(e.which){ 
    case 97: 
    alert('foobar');
    break;
    .......

Answer 2

您可以指定要添加事件侦听器的元素/元素，例如：

document.getElementById('text-field').keypress = function (e) {
    var code = e.keyCode || e.which;
    switch (code) {
        case 97:
            alert('foobar');
            break;
        ....
    } 
}

Answer 3

我可以看到两种可能的方法：

1. 将 onfocus/onblur 处理程序添加到您的文本输入中，以清除/设置 document.keypress。

2. 在处理程序中，获取当前聚焦的元素

如何找出哪个 DOM 元素具有焦点？

然后使用 .tagName 和 .type 属性来判断是否是文本输入。

Answer 4

我认为您正在寻找的是 jQuery 的stopPropagation方法。

从文档 -

防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

$(':input').on('keypress', function(e) {
      e.stopPropagation();
});

工作小提琴

在文本框内单击时，不会显示警报。当您单击文档中的任何其他位置时，将显示警报。

Answer 5

尝试以下：

$(document).on("keypress",function(e){
    switch(e.which){ 
      case 97: 
       alert('foobar');
       break;
    }
});

$('textarea,input[type="text"]').on("keypress",function(e){
   e.stopPropagation();
});

这是小提琴：http: //jsfiddle.net/m7ghb/

我希望它有所帮助。

Answer 6

您可以使用 jQuery 的keyPress方法。

http://api.jquery.com/keypress/

这是如何使用它：

$("#target").keypress(function(e) {
  e.preventDefault();
});