JavaScript-Key-Listener innerhalb eines Textformulars deaktiviert

Question

Ich habe einen Tastenhörer, der den Pfeiltasten zugewiesen ist, um in einer Diashow zu navigieren. Aber ich möchte den Key Listener vorübergehend deaktivieren, während ein Benutzer in einem Eingabefeld tippt. Wie kann ich das tun? Mein aktueller Code sieht wie folgt aus:

//Listen to the keys
    function checkKey(e) {
    switch (e.keyCode) {
    case 37:
        changeImage('prev');
        break;
    case 39:
        changeImage('next');;
        break;
        }
    }
    if (jQuery.browser.mozilla) {
            jQuery(document).keypress (checkKey);
    } else {
            jQuery(document).keydown (checkKey);
    }

Answer 1

Erstens ist die Browserprüfung nicht erforderlich. Für die Überprüfung der Pfeiltasten verwenden Sie einfach die keydown Ereignis für alle Schlüssel.

Zweitens schlage ich vor (wie Sean Hogan es getan hat), das Ziel der Veranstaltung zu überprüfen, bevor Sie die Diashow machen. Das Folgende funktioniert mit allen gängigen Desktop-Browsern:

document.body.onkeydown = function(evt) {
    evt = evt || window.event;
    var target = evt.target || evt.srcElement;
    var targetTagName = (target.nodeType == 1) ? target.nodeName.toUpperCase() : "";
    if ( !/INPUT|SELECT|TEXTAREA/.test(targetTagName) ) { 
        switch (evt.keyCode) {
            case 37:
                changeImage('prev');
                break;
            case 39:
                changeImage('next');
                break;
        }
    }
}

Answer 2

Ein bisschen hässlich, aber sollte funktionieren:

var moz = jQuery.browser.mozilla;
if (moz) {
    jQuery(document).keypress(checkKey);
} else {
    jQuery(document).keydown(checkKey);
}
jQuery("#myInput").focus(function() {
    if (moz) {
        jQuery(document).unbind("keypress");
    } else {
        jQuery(document).unbind("keydown");
    }
}).blur(function() {
    if (moz) {
        jQuery(document).keypress(checkKey);
    } else {
        jQuery(document).keydown(checkKey);
    }
});

Answer 3

Wenn der Fokus auf einem Eingabeelement liegt, ist dieses Element das Ziel für Schlüsselereignisse.

Sie könnten also einfach eine Prüfung auf event.target.tagName durchführen.

z.B..

function checkKey(e) {  
  switch (e.target.tagName) {  
    case "INPUT": case "SELECT": case "TEXTAREA": return;  
  }  
  // rest of your handler goes here ...  
}

Answer 4

Fügen Sie dem Eingabefeld die Ereignisse onfocus und onblur hinzu und setzen Sie den Wert einer globalen Variablen. Überprüfen Sie diese globale Variable am Anfang Ihres checkKey-Ereignishandlers.

<input type="textbox" onfocus="window.inTextBox = true;" onblur="window.inTextBox = false;" />

function checkKey(e) {
 if (!window.inTextBox)
 {
  ...
 }
}

Answer 5

Mir gefällt die Einfachheit des Vorschlags von Ilya Volodin, aber ich würde den Event-Handler in das Skript setzen und nicht in die HTML-Datei einbetten:

  var textFocus = false; 

  $("textbox").focus(function() {
      textFocus = true;
   });

  $("textbox").blur(function() {
      textFocus = false;
   });

  function navKeys() {
       if (textFocus) {
            return false;
       } else {
       ......
       }
   }

Dies wäre noch einfacher, wenn jquery über :focus als Selektor.

      function navKeys() {
       if ($("textbox:focus") {
            return false;
       } else {
       ......
       }
   }

Aber das ist im Moment nur ein hypothetischer Code.