Jak dowiedzieć się, który klawisz znaku jest wciśnięty?

118

Chciałbym dowiedzieć się, jaki klawisz znaku jest naciskany w sposób zgodny z różnymi przeglądarkami w czystym Javascript.

javascript dom-events keypress xXx
źródło

1

Czy to nie wszystkie odpowiedzi na pytanie „jaki klawisz został naciśnięty?” Co jeśli podczas wykonywania kod javascript chce wiedzieć, czy klawisz na klawiaturze jest aktualnie wciśnięty?

mwardm

2

event.keybezpośrednio da ci wciśnięty char

Gibolt

158

„Wyczyść” JavaScript:

<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)); 
});

Coyod
źródło

6

działa to dobrze w przypadku znaków alfabetycznych, ale co z kropkami / podziałkami i innymi symbolami typograficznymi?

VoVaVc

6

@VoVaVc: To działa również dla tych. Kluczową rzeczą jest użycie keypresszdarzenia, które daje kod znaku, a nie keyuplub keydownktóry daje kod klucza.

Tim Down

2

@aljgom, e.keynadal nie ma pełnej obsługi przeglądarki.

Andy Mercer

1

Nie działa dla symboli, które musisz nacisnąć klawisz Shift, aby utworzyć, na przykład!

Curtis

5

Klucz @AndyMercer jest teraz obsługiwany przez wszystkie główne przeglądarki: developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/…

Ray

34

Tutaj jest milion duplikatów tego pytania, ale i tak znowu:

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

Najlepsze odniesienie do kluczowych wydarzeń, jakie widziałem, to http://unixpapa.com/js/key.html .

Tim Down
źródło

23

Nowsze i znacznie czystsze: użyj event.key. Nigdy więcej dowolnych kodów liczbowych!

UWAGA: Stare właściwości ( .keyCodei .which) są przestarzałe.

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

Jeśli chcesz mieć pewność, że wprowadzane są tylko pojedyncze znaki, sprawdź key.length === 1, czy jest to jeden z oczekiwanych znaków.

Dokumenty Mozilli

Obsługiwane przeglądarki

Gibolt
źródło

Czy to dotyczy node.js?

merrybot

Nie, węzeł oznacza po prostu dowolny element DOM. Gdyby Node.js łączył się z interfejsem użytkownika, przypuszczam, że zadziała

Gibolt

keydown dla niektórych urządzeń mobilnych nie działa, zwraca undefine

Angelotti

4

Próbować:

<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>

Rozwiń fragment

* Uwaga: to działa w przypadku „Uruchom fragment kodu”

Ta strona robi to samo, co mój kod powyżej: Keycode.info

lewdev
źródło

1

Użyj tego:

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');
  }
}

JCasso
źródło

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>

kki3908050
źródło

1

Czy to nie jest prawie dokładna kopia odpowiedzi @ Coyod z 2009 roku?

Chris F Carroll

1

Jedną z moich ulubionych bibliotek, która robi to w wyrafinowany sposób, jest Pułapka na myszy .

Jest wyposażony w różne wtyczki, z których jedną jest recordwtyczka, która może zidentyfikować sekwencję wciśniętych klawiszy.

Przykład:

<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>

moment dipolowy
źródło

@DanLowe Właśnie dodałem fragment.

dipole_moment

Uncaught TypeError: Mousetrap.record nie jest funkcją w recordSequence (****. Html: 12) w HTMLButtonElement.onclick (****. Html: 20)

Irrmich

-2

document.onkeypress = function(event){
    alert(event.key)
}

gomozor
źródło

Jak dowiedzieć się, który klawisz znaku jest wciśnięty?

Odpowiedzi: