Ok tuşlarından birine basıldığını nasıl tespit edebilirim? Bunu bulmak için kullandım:

function checkKey(e) {
    var event = window.event ? window.event : e;
    console.log(event.keyCode)
}

Diğer tüm tuşlar için çalışmasına rağmen, ok tuşları için yoktu (belki de tarayıcının varsayılan olarak bu tuşlara kaydırması gerekiyordu).

Ok tuşları sadece tetiklenir onkeydown, değil onkeypress.

Anahtar kodları:

• sol = 37
• yukarı = 38
• sağ = 39
• aşağı = 40

Tuş yukarı ve aşağı çağrı fonksiyonu. Her anahtar için farklı kodlar vardır.

document.onkeydown = checkKey;

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        // up arrow
    }
    else if (e.keyCode == '40') {
        // down arrow
    }
    else if (e.keyCode == '37') {
       // left arrow
    }
    else if (e.keyCode == '39') {
       // right arrow
    }

}

event.key === "ArrowRight" ...

Daha yeni ve daha temiz: kullanın event.key. Artık keyfi sayı kodları yok! Aktarıyorsanız veya kullanıcılarınızın modern tarayıcılarda olduğunu biliyorsanız, bunu kullanın!

node.addEventListener('keydown', function(event) {
    const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
});

Ayrıntılı İşleme:

switch (event.key) {
    case "ArrowLeft":
        // Left pressed
        break;
    case "ArrowRight":
        // Right pressed
        break;
    case "ArrowUp":
        // Up pressed
        break;
    case "ArrowDown":
        // Down pressed
        break;
}

Bunu "w", "a", "s", "d"veya başka bir anahtarı kontrol etmek için kolayca genişletebilirsiniz

Mozilla Belgeleri

Desteklenen Tarayıcılar

PS oklarevent.code için aynı

Muhtemelen en ters formülasyon:

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

Demo (Angus Grant kullanıcısı sayesinde): http://jsfiddle.net/angusgrant/E3tE6/

Bu, çapraz tarayıcıda çalışmalıdır. Çalışmadığı bir tarayıcı varsa bir yorum bırakın.

Anahtar kodunu almanın başka yolları da vardır (e yerine e.which, e.charCode ve window.event), ancak bunlar gerekli olmamalıdır. Bunların çoğunu http://www.asquare.net/javascript/tests/KeyCode.html adresinden deneyebilirsiniz . Event.keycode'un Firefox'ta onkeypress ile çalışmadığını, ancak onkeydown ile çalıştığını unutmayın.

Kullanım keydowndeğil, keypressOk tuşları gibi olmayan yazdırılabilir anahtarlar için:

function checkKey(e) {
    e = e || window.event;
    alert(e.keyCode);
}

document.onkeydown = checkKey;

Bulduğum en iyi JavaScript anahtarı etkinliği referansı (örneğin, pantolonları yorucudan atmak) burada: http://unixpapa.com/js/key.html

KeyCode artık anahtar lehine kullanımdan kaldırıldığı için modern cevap :

document.onkeydown = function (e) {
    switch (e.key) {
        case 'ArrowUp':
            // up arrow
            break;
        case 'ArrowDown':
            // down arrow
            break;
        case 'ArrowLeft':
            // left arrow
            break;
        case 'ArrowRight':
            // right arrow
    }
};

En son yöntem şöyle olacağını düşünüyorum:

document.addEventListener("keydown", function(event) {
  event.preventDefault();
  const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
  switch (key) { // change to event.key to key to use the above variable
    case "ArrowLeft":
      // Left pressed
      <do something>
      break;
    case "ArrowRight":
      // Right pressed
      <do something>
      break;
    case "ArrowUp":
      // Up pressed
      <do something>
      break;
    case "ArrowDown":
      // Down pressed
      <do something>
      break;
  }
});

Bu, geliştiricinin kodun sayfanın herhangi bir yerinde etkin olmasını istediğini ve istemcinin başka herhangi bir tuşa basmayı yoksayması gerektiğini varsayar. Event.preventDefault () öğesini ortadan kaldırın; Bu işleyici tarafından yakalananlar da dahil olmak üzere tuşa basmaların etkin olması gerekir.

function checkArrowKeys(e){
    var arrs= ['left', 'up', 'right', 'down'], 
    key= window.event? event.keyCode: e.keyCode;
    if(key && key>36 && key<41) alert(arrs[key-37]);
}
document.onkeydown= checkArrowKeys;

İşte bir örnek uygulama:

var targetElement = $0 || document.body;

function getArrowKeyDirection (keyCode) {
  return {
    37: 'left',
    39: 'right',
    38: 'up',
    40: 'down'
  }[keyCode];
}

function isArrowKey (keyCode) {
  return !!getArrowKeyDirection(keyCode);
}

targetElement.addEventListener('keydown', function (event) {
  var direction,
      keyCode = event.keyCode;

  if (isArrowKey(keyCode)) {
    direction = getArrowKeyDirection(keyCode);

    console.log(direction);
  }
});

İşte böyle yaptım:

var leftKey = 37, upKey = 38, rightKey = 39, downKey = 40;
var keystate;
document.addEventListener("keydown", function (e) {
    keystate[e.keyCode] = true;
});
document.addEventListener("keyup", function (e) {
    delete keystate[e.keyCode];
});

if (keystate[leftKey]) {
//code to be executed when left arrow key is pushed.
}
if (keystate[upKey]) {
//code to be executed when up arrow key is pushed.
}
if (keystate[rightKey]) {
//code to be executed when right arrow key is pushed.
}
if (keystate[downKey]) {
//code to be executed when down arrow key is pushed.
}

Onları jQuery ile yakalayabildim:

$(document).keypress(function (eventObject) {
    alert(eventObject.keyCode);
});

Bir örnek: http://jsfiddle.net/AjKjU/

Bu, krom ve firefox için çalışma kodudur

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript">

    function leftArrowPressed() {
      alert("leftArrowPressed" );
      window.location = prevUrl  
    }

    function rightArrowPressed() {
      alert("rightArrowPressed" );
      window.location = nextUrl  
    }
    function topArrowPressed() {
      alert("topArrowPressed" );
      window.location = prevUrl  
    }

    function downArrowPressed() {
      alert("downArrowPressed" );
      window.location = nextUrl  
    }

        document.onkeydown = function(evt) {
                        var nextPage = $("#next_page_link")
                        var prevPage = $("#previous_page_link")
                        nextUrl = nextPage.attr("href")
                        prevUrl = prevPage.attr("href")
        evt = evt || window.event;
        switch (evt.keyCode) {
                case 37:
                leftArrowPressed(nextUrl);
                break;

                case 38:
                topArrowPressed(nextUrl);
                break;

                 case 39:
                rightArrowPressed(prevUrl);
                break;

                case 40:
                downArrowPressed(prevUrl);
                break;

        }
    };


</script>
</head>
<body>
<p>
<a id="previous_page_link" href="http://www.latest-tutorial.com">Latest Tutorials</a> 
<a id="next_page_link" href="http://www.zeeshanakhter.com">Zeeshan Akhter</a>
 </p>
</body>
</html>

Bu yazıyla karşılaşana kadar da bu cevabı arıyordum.

Farklı anahtarların kodunu bilmek için başka bir çözüm buldum, sorunuma nezaketle. Sadece çözümümü paylaşmak istedim.

Konsolda değeri yazmak için aynı anahtar / keydown olayını kullanın event.keyCode. sevmek-

console.log(event.keyCode) 

// or

alert(event.keyCode)

- rupam

Bu daha kısa.

function IsArrows (e) { return (e.keyCode >= 37 && e.keyCode <= 40); }

Bu kütüphane sallanıyor! https://craig.is/killing/mice

Mousetrap.bind('up up down down left right left right b a enter', function() {
    highlight([21, 22, 23]);
});

Yine de bu sayfadaki kodu vurgulamak için diziye biraz hızlı basmanız gerekir.

İhtiyacınız keydownolmayan cevapları yeniden verin keypress.

Tuşa basıldığında sürekli olarak bir şey taşımak istediğinizi varsayarsak, keydownOpera hariç tüm tarayıcılarda işe yarar. Opera için, keydownyalnızca 1. basışta tetiklenir. Opera kullanımına uyum sağlamak için:

document.onkeydown = checkKey;
document.onkeypress = checkKey;
function checkKey(e)
{ etc etc

Ok Tuşları keyup'ta tetiklenir

$(document).on("keyup", "body", function(e) {
 if (e.keyCode == 38) {
    // up arrow
    console.log("up arrow")
  }
  if (e.keyCode == 40) {
      // down arrow
      console.log("down arrow")
  }
  if (e.keyCode == 37) {
    // left arrow
    console.log("lefy arrow")
  }
  if (e.keyCode == 39) {
    // right arrow
    console.log("right arrow")
  }
})

onkeydown, ctrl, alt, shits

onkeyup sekmeye, yukarı oklara, aşağı oklara, sol oklara, aşağı oklara izin verir

Jquery kullanıyorsanız, bunu da yapabilirsiniz,

 $(document).on("keydown", '.class_name', function (event) {
    if (event.keyCode == 37) {
        console.log('left arrow pressed');
    }
    if (event.keyCode == 38) {
        console.log('up arrow pressed');
    }
    if (event.keyCode == 39) {
        console.log('right arrow pressed');
    }
    if (event.keyCode == 40) {
        console.log('down arrow pressed');
    }
 });

Anahtar kodlarını kontrol edin %=37ve &=38... ve sadece sol ok tuşları = 37 yukarı = 38

function IsArrows (e) {
   return ( !evt.shiftKey && (e.keyCode >= 37 && e.keyCode <= 40)); 
}

Ok tuşlarına basmayı algılamak, ancak Javascript'te belirli bir şeye ihtiyacınız yoksa

function checkKey(e) {
   if (e.keyCode !== 38 || e.keyCode !== 40 || e.keyCode !== 37 || e.keyCode !== 39){
    // do something
   };
}

İle anahtarın ve ES6.

Bu, anahtarı kullanmadan her ok tuşu için ayrı bir işlev sağlar ve açıkken sayısal tuş takımındaki 2,4,6,8 tuşlarıyla da çalışır NumLock.

const element = document.querySelector("textarea"),
  ArrowRight = k => {
    console.log(k);
  },
  ArrowLeft = k => {
    console.log(k);
  },
  ArrowUp = k => {
    console.log(k);
  },
  ArrowDown = k => {
    console.log(k);
  },
  handler = {
    ArrowRight,
    ArrowLeft,
    ArrowUp,
    ArrowDown
  };

element.addEventListener("keydown", e => {
  const k = e.key;

  if (handler.hasOwnProperty(k)) {
    handler[k](k);
  }
});

<p>Click the textarea then try the arrows</p>
<textarea></textarea>