it-swarm.com.de

Bindungspfeiltasten in JS / jQuery

Wie binde ich eine Funktion in Javascript und/oder jQuery an die linke und rechte Pfeiltaste? Ich habe mir das js-hotkey-Plugin für jQuery angesehen (umschließt die integrierte Bindefunktion, um ein Argument zum Erkennen bestimmter Schlüssel hinzuzufügen), aber es scheint keine Pfeiltasten zu unterstützen.

405
Alex S
_$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});
_

Setzen Sie Ihren benutzerdefinierten Code für die Pfeiltasten zwischen die entsprechenden Zeilen case und break.

e.which wird von jQuery normalisiert und funktioniert daher in allen Browsern. Ersetzen Sie für einen reinen Javascript-Ansatz die ersten beiden Zeilen durch:

_document.onkeydown = function(e) {
    e = e || window.event;
    switch(e.which || e.keyCode) {
_


(überarbeitet 2017)
Wenn Sie Lust haben, können Sie jetzt e.key anstelle von _e.which_ oder _e.keyCode_ verwenden. _e.key_ wird zu einem empfohlenen Standard, mit dem Sie nach folgenden Zeichenfolgen suchen können: _'ArrowLeft'_, _'ArrowUp'_, _'ArrowRight'_, _'ArrowDown'_. Neue Browser unterstützen es nativ, hier überprüfen .

522
Sygmoral
$(document).keydown(function(e){
    if (e.which == 37) { 
       alert("left pressed");
       return false;
    }
});

Zeichencodes:

37 - links

38 - bis

39 - richtig

40 - unten

447
Josh

Sie können den keyCode der Pfeiltasten verwenden (37, 38, 39 und 40 für links, oben, rechts und unten):

$('.selector').keydown(function (e) {
  var arrow = { left: 37, up: 38, right: 39, down: 40 };

  switch (e.which) {
    case arrow.left:
      //..
      break;
    case arrow.up:
      //..
      break;
    case arrow.right:
      //..
      break;
    case arrow.down:
      //..
      break;
  }
});

Überprüfen Sie das obige Beispiel hier .

104
CMS

Dies ist etwas spät, aber HotKeys hat einen sehr großen Fehler, der dazu führt, dass Ereignisse mehrmals ausgeführt werden, wenn Sie mehr als einen Hotkey an ein Element anhängen. Verwenden Sie einfach nur jQuery.

$(element).keydown(function(ev) {
    if(ev.which == $.ui.keyCode.DOWN) {
        // your code
        ev.preventDefault();
    }
});
23
mackstann

Ich habe einfach die besten Teile aus den anderen Antworten kombiniert:

$(document).keydown(function(e){
    switch(e.which) {
        case $.ui.keyCode.LEFT:
        // your code here
        break;

        case $.ui.keyCode.UP:
        // your code here
        break;

        case $.ui.keyCode.RIGHT:
        // your code here
        break;

        case $.ui.keyCode.DOWN:
        // your code here
        break;

        default: return; // allow other keys to be handled
    }

    // prevent default action (eg. page moving up/down)
    // but consider accessibility (eg. user may want to use keys to choose a radio button)
    e.preventDefault();
});
16
matt burns

Sie können KeyboardJS verwenden. Ich habe die Bibliothek für solche Aufgaben geschrieben.

KeyboardJS.on('up', function() { console.log('up'); });
KeyboardJS.on('down', function() { console.log('down'); });
KeyboardJS.on('left', function() { console.log('right'); });
KeyboardJS.on('right', function() { console.log('left'); });

Kasse der Bibliothek hier => http://robertwhurst.github.com/KeyboardJS/

14
Robert Hurst

Eine knappe Lösung mit einfachem Javascript (danke an Sygmoral für die vorgeschlagenen Verbesserungen):

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            alert('left');
            break;
        case 39:
            alert('right');
            break;
    }
};

Siehe auch https://stackoverflow.com/a/17929007/1397061 .

12
1''

Sind Sie sicher, dass jQuery.HotKeys die Pfeiltasten nicht unterstützt? Ich habe vorher mit ihrer Demo rumgespielt und festgestellt, dass links, rechts, oben und unten gearbeitet hat, als ich sie in IE7, Firefox 3.5.2 und Google Chrome 2.0.172 getestet habe ...

EDIT: Es scheint, dass jquery.hotkeys nach Github verschoben wurde: https://github.com/jeresig/jquery.hotkeys)

9
Pandincus

Anstatt return false; wie in den obigen Beispielen zu verwenden, können Sie e.preventDefault(); verwenden, das dasselbe tut, aber einfacher zu verstehen und zu lesen ist.

5
Gaetan

Beispiel für reines js mit rechts oder links gehen

        window.addEventListener('keydown', function (e) {
            // go to the right
            if (e.keyCode == 39) {

            }
            // go to the left
            if (e.keyCode == 37) {

            }
        });
4
Vince Verhoeven

Sie können jQuery bind verwenden:

$(window).bind('keydown', function(e){
    if (e.keyCode == 37) {
        console.log('left');
    } else if (e.keyCode == 38) {
        console.log('up');
    } else if (e.keyCode == 39) {
        console.log('right');
    } else if (e.keyCode == 40) {
        console.log('down');
    }
});
3

Sie können überprüfen, ob ein arrow key gedrückt wird durch:

$(document).keydown(function(e){
    if (e.keyCode > 36 && e.keyCode < 41) { 
       alert( "arrowkey pressed" );
       return false;
    }
});
2
suhailvs

Eine robuste Javascript-Bibliothek zum Erfassen von Tastatureingaben und eingegebenen Tastenkombinationen. Es gibt keine Abhängigkeiten.

http://jaywcjlove.github.io/hotkeys/

hotkeys('right,left,up,down', function(e, handler){
    switch(handler.key){
        case "right":console.log('right');break
        case "left":console.log('left');break
        case "up":console.log('up');break
        case "down":console.log('down');break
    }
});
0
小弟调调

Ich bin hierher gekommen, um nach einer einfachen Möglichkeit zu suchen, den Benutzer bei der Fokussierung auf eine Eingabe die Pfeiltasten verwenden zu lassen, um eine numerische Eingabe +1 oder -1 zu geben. Ich habe nie eine gute Antwort gefunden, aber den folgenden Code erstellt, der anscheinend großartig funktioniert - und ihn jetzt für die gesamte Website verfügbar macht.

$("input").bind('keydown', function (e) {
    if(e.keyCode == 40 && $.isNumeric($(this).val()) ) {
        $(this).val(parseFloat($(this).val())-1.0);
    } else if(e.keyCode == 38  && $.isNumeric($(this).val()) ) { 
        $(this).val(parseFloat($(this).val())+1.0);
    }
}); 
0
Scott

verhindern Sie, dass Pfeil nur für ein anderes Objekt verfügbar ist. SELECT. Nun, ich habe noch kein anderes Objekt ausgewählt. LOL. Das Pfeilereignis auf Seite und Eingabetyp kann jedoch gestoppt werden.

ich versuche bereits, den Pfeil nach links und rechts zu blockieren, um den Wert des SELECT-Objekts mit "e.preventDefault ()" oder "return false" bei "kepress" "keydown" und "keyup" -Ereignis zu ändern, aber es ändert immer noch den Objektwert. Das Ereignis sagt Ihnen jedoch immer noch, dass der Pfeil gedrückt wurde.

0
phoenixs