如何在文本區域停用按鍵事件

Question

我正在編寫一個JavaScript應用程序。 我用過類似的東西

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

而且效果很好！ 現在，在html頁面的某個地方，我有一個textarea，現在，每當我鍵入a （即ASCII 97），它就會a alert （很明顯）。

問題是我該如何預防？ 我的按鍵事件對除textareas和文本字段之外的所有內容都起作用？

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

我認為您正在尋找的是jQuery的stopPropagation方法。

從文檔-

防止事件使DOM樹冒泡，從而防止任何父處理程序收到該事件的通知。

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

工作提琴

當您在文本框中單擊時，將不會顯示警報。 當您單擊文檔中的其他任何位置時，將顯示警報。

Answer 4

我可以看到兩種可能的方法：

1. 在文本輸入中添加onfocus / onblur處理程序，以清除/設置document.keypress。

2. 在處理程序中，獲取當前關注的元素

我如何找出哪個DOM元素具有焦點？

然后使用.tagName和.type屬性確定它是否為文本輸入。

Answer 5

您可以使用jQuery的keyPress方法。

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

使用方法如下：

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

Answer 6

嘗試以下操作：

$(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/

希望對您有所幫助。