Vorrei scoprire quale tasto carattere viene premuto in modo compatibile con cross-browser in puro Javascript.
event.key
ti darà direttamente il carattere premuto
Vorrei scoprire quale tasto carattere viene premuto in modo compatibile con cross-browser in puro Javascript.
event.key
ti darà direttamente il carattere premuto
Risposte:
JavaScript "Cancella":
<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));
});
keypress
evento, che ti dà un codice carattere, piuttosto che keyup
o keydown
che ti dà un codice chiave.
e.key
non ha ancora il supporto completo del browser.
Ci sono un milione di duplicati di questa domanda qui, ma eccolo di nuovo comunque:
document.onkeypress = function(evt) {
evt = evt || window.event;
var charCode = evt.keyCode || evt.which;
var charStr = String.fromCharCode(charCode);
alert(charStr);
};
Il miglior riferimento sugli eventi chiave che ho visto è http://unixpapa.com/js/key.html .
Più recente e molto più pulito: usa event.key
. Niente più codici numerici arbitrari!
NOTA: le vecchie proprietà (
.keyCode
e.which
) sono deprecate.
node.addEventListener('keydown', function(event) {
const key = event.key; // "a", "1", "Shift", etc.
});
Se vuoi assicurarti che siano inseriti solo caratteri singoli, controlla key.length === 1
o che sia uno dei caratteri che ti aspetti.
Provare:
<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>
* Nota: funziona in "Esegui snippet di codice"
Questo sito web fa lo stesso del mio codice sopra: Keycode.info
**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>
Una delle mie librerie preferite per farlo in modo sofisticato è Mousetrap .
Viene fornito con una varietà di plugin, uno dei quali è il record
plugin che può identificare una sequenza di tasti premuti.
Esempio:
<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>