Pytanie Jak dowiedzieć się, jaki klawisz znaku jest wciśnięty?


Chciałbym dowiedzieć się, jaki klawisz znaku jest wciśnięty w sposób kompatybilny z różnymi przeglądarkami w czystym javascript.


76
2017-12-04 12:17


pochodzenie


Czy nie wszystkie są odpowiedzi na pytanie "jaki klucz był naciśniesz? "Co jeśli w trakcie wykonywania kod javascript chce wiedzieć, czy klawisz na klawiaturze jest obecnie przytrzymany? - mwardm
event.key bezpośrednio da ci wciśnięty znak - Gibolt


Odpowiedzi:


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

128
2017-12-04 12:36



działa to poprawnie dla znaków alfabetu, ale co z kropkami / hamulcami i innymi symbolami typogtaficznymi? - VoVaVc
@VoVaVc: Działa również dla nich. Najważniejsze jest użycie keypress wydarzenie, które daje kod postaci, a nie keyup lub keydown które dają ci kluczowy kod. - Tim Down
e.which jest przestarzałe. Posługiwać się e.key zamiast tego, jak w if(e.key == 'z') - aljgom
@aljgom, e.key nadal nie ma pełnej obsługi przeglądarki. - Andy Mercer
Nie działa dla symboli, które musisz nacisnąć, aby zmienić, jak! - Curtis


Istnieje miliony duplikatów tego pytania tutaj, ale tutaj znowu i tak:

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

Najlepszym odniesieniem dla kluczowych wydarzeń, które widziałem jest http://unixpapa.com/js/key.html.


27
2017-12-04 12:41





Bardziej aktualny i znacznie czystszy: użyj event.key. Nie więcej arbitralnych kodów numerów!

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

Jeśli chcesz się upewnić, że wprowadzane są tylko pojedyncze znaki, zaznacz key.length === 1lub że jest to jedna z oczekiwanych postaci.

Dokumenty Mozilli

Obsługiwane przeglądarki


6
2017-09-05 18:03





Spójrz na tę stronę pod kątem niespójności między przeglądarkami http://www.quirksmode.org/js/keys.html


2
2017-12-04 12:26



Tylko przy zdarzeniu naciśnięcia klawisza w niektórych przeglądarkach (zwłaszcza w Firefoksie). - Tim Down
@Tim Good point - właściwie to wezmę. - Matt


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

1
2017-12-04 12:31





**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
2017-12-08 12:31



Czy nie jest to prawie dokładny duplikat odpowiedzi @ Coyod z 2009 roku? - Chris F Carroll


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

Jest wyposażony w wiele wtyczek, z których jedną jest record wtyczka umożliwiająca identyfikację sekwencji naciś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>

1
2017-11-13 13:47



Prawda, że. Zrobi to. - dipole_moment
@DanLowe Właśnie dodałem fragment. - dipole_moment


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

-2
2018-03-07 19:10