Hangi karakter tuşuna basıldığını nasıl öğrenebilirim?


118

Tam bir Javascript ile tarayıcılar arası uyumlu bir şekilde hangi karakter tuşuna basıldığını öğrenmek istiyorum.


1
Sorusu için tüm bu cevaplar değil misin "nasıl bir anahtar oldu basıldığında?" Ya javascript kodu yürütülürken klavyedeki bir tuşun o anda basılı tutulup tutulmadığını bilmek isterse?
mwardm

2
event.keydoğrudan size preslenmiş karakteri verecektir
Gibolt

Yanıtlar:


158

JavaScript'i "Temizle":

<script type="text/javascript">
  function myKeyPress(e){
    var keynum;

    if(window.event) { // IE                    
      keynum = e.keyCode;
    } else if(e.which){ // Netscape/Firefox/Opera                   
      keynum = e.which;
    }

    alert(String.fromCharCode(keynum));
  }
</script>

<form>
  <input type="text" onkeypress="return myKeyPress(event)" />
</form>

JQuery:

$(document).keypress(function(event){
  alert(String.fromCharCode(event.which)); 
});

6
bu alfabetik karakterler için uygundur, peki ya noktalar / parantezler ve diğer tipografik semboller?
VoVaVc

6
@VoVaVc: Onlar için de işe yarıyor. Önemli şey kullanıyor keypressyerine, sana bir karakter kodu verir olayı, keyupya keydownsana bir anahtar kodunu verin.
Tim Down

2
@aljgom, e.keyhala tam tarayıcı desteğine sahip değil.
Andy Mercer

1
Yapmak için vardiya tuşuna basmanız gereken semboller için çalışmıyor!
Curtis

5
@AndyMercer anahtarı artık tüm büyük tarayıcılar tarafından desteklenmektedir: developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/…
Ray

34

Burada bu sorunun bir milyon kopyası var, ama yine de burada tekrar var:

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);
    alert(charStr);
};

Gördüğüm önemli olaylarla ilgili en iyi referans http://unixpapa.com/js/key.html'dir .


23

Daha yeni ve çok daha temiz: kullanın event.key. Artık keyfi sayı kodları yok!

NOT: Eski özellikler ( .keyCodeve .which) Kullanımdan Kaldırılmıştır.

node.addEventListener('keydown', function(event) {
    const key = event.key; // "a", "1", "Shift", etc.
});

Yalnızca tek karakterlerin girildiğinden emin olmak istiyorsanız, kontrol edin key.length === 1veya beklediğiniz karakterlerden biri olup olmadığını kontrol edin .

Mozilla Belgeleri

Desteklenen Tarayıcılar


Bu node.js için mi?
merrybot

Hayır, düğüm yalnızca herhangi bir DOM öğesi anlamına gelir. Bir kullanıcı arayüzüne bağlanan Node.js varsa, işe yarayacağını düşünüyorum
Gibolt

bazı mobil cihazlar için tuş kilidi çalışmıyor, geri dönün undefine
Angelotti

4

Deneyin:

<table>
<tr><td>Key:</td><td id="key"></td></tr>
<tr><td>Key Code:</td><td id="keyCode"></td></tr>
<tr><td>Event Code:</td><td id="eventCode"></td></tr>
</table>
<script type="text/javascript">
window.addEventListener("keydown", function (e) {
  //tested in IE/Chrome/Firefox
  document.getElementById("key").innerHTML = e.key;
  document.getElementById("keyCode").innerHTML = e.keyCode;
  document.getElementById("eventCode").innerHTML = e.code;
})
</script>

* Not: Bu, "Kod parçacığını çalıştır" da çalışır

Bu web sitesi yukarıdaki kodumla aynı şeyi yapıyor: Keycode.info


1

Bunu kullan:

function onKeyPress(evt){
  evt = (evt) ? evt : (window.event) ? event : null;
  if (evt)
  {
    var charCode = (evt.charCode) ? evt.charCode :((evt.keyCode) ? evt.keyCode :((evt.which) ? evt.which : 0));
    if (charCode == 13) 
        alert('User pressed Enter');
  }
}

1
**check this out** 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).keypress(function(e)
        {

            var keynum;
            if(window.event)
            { // IE                 
                keynum = e.keyCode;
            }
                else if(e.which)
                    { 
                    // Netscape/Firefox/Opera                   
                    keynum = e.which;
                    }
                    alert(String.fromCharCode(keynum));
                    var unicode=e.keyCode? e.keyCode : e.charCode;
                    alert(unicode);
        });
});  

</script>
</head>
<body>

<input type="text"></input>
</body>
</html>

1
Bu, @ Coyod'un 2009 cevabının neredeyse aynısı değil mi?
Chris F Carroll

1

Bunu sofistike bir şekilde yapan en sevdiğim kütüphanelerden biri Fare Kapanı .

Çeşitli eklentilerle stoklanmış olarak gelir; bunlardan biri, recordbasılan bir dizi tuşu tanımlayabilen eklentidir.

Misal:

<script>
    function recordSequence() {
        Mousetrap.record(function(sequence) {
            // sequence is an array like ['ctrl+k', 'c']
            alert('You pressed: ' + sequence.join(' '));
        });
    }
</script>


<button onclick="recordSequence()">Record</button>

@DanLowe Az önce bir parça ekledim.
dipole_moment

Yakalanmamış TypeError: Mousetrap.record, HTMLButtonElement.onclick adresindeki recordSequence (****. Html: 12) işlevinde değil (****. Html: 20)
Irrmich

-2
document.onkeypress = function(event){
    alert(event.key)
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.