Gostaria de descobrir qual tecla de caractere é pressionada de maneira compatível com vários navegadores em Javascript puro.
event.key
fornecerá diretamente o char pressionado
Gostaria de descobrir qual tecla de caractere é pressionada de maneira compatível com vários navegadores em Javascript puro.
event.key
fornecerá diretamente o char pressionado
Respostas:
JavaScript "Clear":
<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, que fornece um código de caractere, em vez de keyup
ou keydown
que fornece um código-chave.
e.key
ainda não tem suporte completo para navegador.
Há um milhão de duplicatas desta pergunta aqui, mas aqui vai novamente de qualquer maneira:
document.onkeypress = function(evt) {
evt = evt || window.event;
var charCode = evt.keyCode || evt.which;
var charStr = String.fromCharCode(charCode);
alert(charStr);
};
A melhor referência sobre os principais eventos que vi é http://unixpapa.com/js/key.html .
Mais recente e muito mais limpo: use event.key
. Não há mais códigos numéricos arbitrários!
NOTA: As propriedades antigas (
.keyCode
e.which
) estão obsoletas.
node.addEventListener('keydown', function(event) {
const key = event.key; // "a", "1", "Shift", etc.
});
Se quiser ter certeza de que apenas caracteres únicos foram inseridos, verifique key.length === 1
ou se é um dos caracteres que você espera.
Experimentar:
<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>
* Observação: isso funciona em "Executar snippet de código"
Este site faz o mesmo que meu código acima: 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>
Uma das minhas bibliotecas favoritas para fazer isso de forma sofisticada é a ratoeira .
Ele vem com uma variedade de plug-ins, um dos quais é o record
plug - in que pode identificar uma sequência de teclas pressionadas.
Exemplo:
<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>