Die Bindung Pfeiltasten in JS / jQuery

Question

Wie kann ich mich über eine Funktion, die Bindung an linken und rechten Pfeiltasten in Javascript und / oder jQuery? Ich schaute auf der js-Hotkey-Plugin für jQuery (wickelt die eingebaute in bind Funktion ein Argument hinzuzufügen, bestimmte Tasten zu erkennen), aber es scheint nicht, Pfeiltasten zu unterstützen.

Answer 1

$(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 eigenen Code für die Pfeiltasten zwischen den entsprechenden case und break Linien.

e.which wird von jQuery normalisiert, so dass es in allen Browsern funktioniert. Für einen reinen Javascript Ansatz, ersetzt die ersten beiden Zeilen mit:

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

(edit 2017)
Wenn Sie Lust fühlen, können Sie e.key statt e.which oder jetzt e.keyCode. e.key wird eine empfohlene Standard werden, so dass Sie gegen Strings überprüfen: 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'. Neuer Browser unterstützt nativ, hier überprüfen.

Answer 2

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

Zeichencodes:

  

37 - links

     

38 - bis

     

39 - rechts

     

40 - down

Answer 3

Sie können die keyCode der Pfeiltasten (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 .

Answer 4

Das ist ein bisschen spät, aber HotKeys hat einen sehr großen Fehler, die Ereignisse verursacht mehrere Male erhalten ausgeführt, wenn Sie mehr als einen Hotkey auf ein Element anhängen. Einfach nur jQuery verwenden.

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

Answer 5

Ich habe einfach die besten Stücke 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();
});

Answer 6

Sie können KeyboardJS verwenden. Ich schrieb die Bibliothek für Aufgaben wie diese.

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/

Answer 7

Eine lapidare Lösung schlicht Javascript (dank Sygmoral für Verbesserungsvorschläge) mit:

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 .

Answer 8

Sind Sie sicher, jQuery.HotKeys unterstützt nicht die Pfeiltasten? Ich habe messed um mit ihrer Demo vor und beobachtete links, rechts, oben und unten zu arbeiten, als ich es in IE7 getestet, Firefox 3.5.2 und Google Chrome 2.0.172 ...

Bearbeiten : Es scheint, jquery.hotkeys wurde Github verlegt: https : //github.com/jeresig/jquery.hotkeys

Answer 9

Statt return false; wie in den obigen Beispielen zu verwenden, können Sie e.preventDefault(); verwenden, die das gleiche tut, aber ist leichter zu verstehen und zu lesen.

Answer 10

Beispiel von reinem js mit dem Gehen nach rechts oder links

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

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

            }
        });

Answer 11

Sie können jQuery binden 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');
    }
});

Answer 12

Sie können prü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;
    }
});

Answer 13

Pfeil verhindern nur für jedes Objekt anders SELECT, gut, ich habe eigentlich nicht tes auf ein anderes Objekt LOL. aber es kann Pfeil Ereignis auf Seite und Eingabetyp stoppen.

ich versuche bereits Pfeil nach links zu blockieren und rechts, um den Wert von SELECT-Objekt zu ändern „e.preventDefault ()“ oder „return false“ auf „kepress“ „keydown“ und „keyup“ -Ereignis verwenden, aber es immer noch das Objekt ändern Wert. aber das Ereignis immer noch sagen, dass Pfeil gedrückt wurde.

Answer 14

Eine robuste Javascript-Bibliothek für die Erfassung Tastatureingabe und Tastenkombinationen eingegeben. Es hat 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
    }
});

Answer 15

Ich kam hier für einen einfachen Weg, um die Benutzer zu lassen, wenn an einem Eingang konzentriert, mit den Pfeiltasten auf +1 oder -1 eine numerische Eingabe. Ich habe nie eine gute Antwort, aber aus dem folgenden Code, der sehr gut zu funktionieren scheint -. So dass diese standortweite jetzt

$("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);
    }
}); 

Answer 16

Mit Kaffee & JQuery

  $(document).on 'keydown', (e) ->
    switch e.which
      when 37 then console.log('left key')
      when 38 then console.log('up key')
      when 39 then console.log('right key')
      when 40 then console.log('down key')
    e.preventDefault()