2010-12-11 15 views
25

Klavye girişini JavaScript’te kullanmak istiyorum; burada, tuşlara basıldığında, belirli bir şeklin şeklindeki değişiklikle sonuçlanacak. JavaScript'deki herhangi bir tuşun girişini nasıl alabilirim?JavaScript'te klavye girişi nasıl alınır?

+2

bir tarayıcıda yapılması gereken bu mudur? Eğer öyleyse klavye olaylarını yakalayabilirsiniz. – ocodo

+1

Evet tarayıcıda – Hick

cevap

56

belgenin veya tuş vuruşlarını gözlemlemek ve key related properties of the event object incelemek istediğiniz herhangi bir öğe üzerinde registering an event handler yapabilirsiniz. FF ve Webkit tabanlı tarayıcılarda çalışır

Örnek:

document.addEventListener('keydown', function(event) { 
    if(event.keyCode == 37) { 
     alert('Left was pressed'); 
    } 
    else if(event.keyCode == 39) { 
     alert('Right was pressed'); 
    } 
}); 

DEMO

+1

IE eşdeğeri eklemek iyi bir şey olurdu. –

+2

, Backspace'ı yakalamak için tarayıcımın "Geri Dönmesini" önlemek için yapabileceğim bir şey var mı? –

+0

@Vitimtk: Üzgünüm, gerçekten şimdi vaktim yok, ama bu sorulara bir göz yoktur: (event.preventDefault kullanma http://stackoverflow.com/search?q=javascript+disable+backspace+navigation –

6

bir tarayıcıda yapıyorsanız, klavye olayları yakalayabilir.

  • keyUp
    • keydown
    • tuşa basma her çoğu tarayıcıda HTML düğümlerde dinledi edilebilir.

      Webkit de ... İstediğin penceresinde bir olay işleyici veya herhangi elemanı için kayıt olmalıdır http://unixpapa.com/js/key.html

    1

    • textInput

    Daha fazla ayrıntı için bakınız .. destekler tuş vuruşlarını gözlemleyin ve keyCode yerine standart key values kullanın. MDN gelen bu modifiye kod sol, sağ, ok tuşlarına basıldığında yukarı veya aşağı zaman keydown yanıt verecektir:

    window.addEventListener("keydown", function (event) { 
     
        if (event.defaultPrevented) { 
     
        return; // Do nothing if the event was already processed 
     
        } 
     
    
     
        switch (event.key) { 
     
        case "ArrowDown": 
     
         // code for "down arrow" key press. 
     
         break; 
     
        case "ArrowUp": 
     
         // code for "up arrow" key press. 
     
         break; 
     
        case "ArrowLeft": 
     
         // code for "left arrow" key press. 
     
         break; 
     
        case "ArrowRight": 
     
         // code for "right arrow" key press. 
     
         break; 
     
        default: 
     
         return; // Quit when this doesn't handle the key event. 
     
        } 
     
    
     
        // Cancel the default action to avoid it being handled twice 
     
        event.preventDefault(); 
     
    }, true); 
     
    // the last option dispatches the event to the listener first, 
     
    // then dispatches event to window

    İlgili konular