Se refiere a los eventos que ocurren cuando se presiona una tecla en el teclado.
Sintaxis:
<tipo de entrada=”texto” onkeypress/onkeydown/onkeyup=”función()/evento”>
Eventos: Los siguientes eventos ocurren al presionar una tecla:
- onkeydown
- onkeypress
- encendido
Propiedades:
- altKey: Devuelve si se presionó o no la tecla alt.
- charCode: Devuelve el carácter Unicode de la clave.
- código: Devuelve el código de la llave ingresada.
- ctrlKey: Devuelve si se presionó o no la tecla ctrl.
- getModifierState(): Devuelve verdadero si la clave especificada está activada.
- isComposing: Devuelve si el evento está componiendo o no.
- key: Devuelve el valor de la clave.
- keyCode: Devuelve el carácter Unicode del evento onkeypress o onkey doen.
- ubicación: Devuelve la ubicación de la tecla en el teclado.
- metaKey: Devuelve si se presionó o no la tecla meta.
- repetir: Vuelve si una tecla se mantiene presionada repetidamente.
- shiftKey: Devuelve si se presionó o no la tecla shift.
- cual: Devuelve el carácter Unicode del tipo de evento.
Valor de retorno: Devuelve eventos que ocurren cuando se presiona una tecla dada desde el teclado.
Ejemplo-1: Mostrando el evento onkeypress.
html
<!DOCTYPE html>
<html>
<body>
<h1>
<center>Geeks for Geeks </center>
</h1>
<p>Type something in the box:</p>
<input type="text" onkeypress="key()">
<script>
function key() {
alert("New Key Inserted");
}
</script>
</body>
</html>
Producción:
Antes de pulsar una tecla:
Después de presionar una tecla:
Ejemplo-2: Mostrando el evento onkeydown.
html
<!DOCTYPE html>
<html>
<body>
<h1>
<center>Geeks for Geeks </center>
</h1>
<p>Type something in the box:</p>
<input type="text" onkeydown="key()">
<script>
function key() {
alert("New Key Inserted");
}
</script>
</body>
</html>
Producción:
Antes de pulsar una tecla:
Después de presionar una tecla:
Ejemplo-3: Para verificar si la tecla presionada es Alt o no.
html
<!DOCTYPE html>
<html>
<body>
<h1>
<center>Geeks for Geeks </center>
</h1>
<p>Type something in the box to
check if Alt key is pressed or not:</p>
<input type="text" onkeydown="isKeyPressed(event)">
<p id="gfg"></p>
<script>
function isKeyPressed(event) {
var x = document.getElementById("gfg");
if (event.altKey) {
x.innerHTML = "ALT Key Pressed";
} else {
x.innerHTML = "ALT Key Not Pressed";
}
}
</script>
</body>
</html>
Producción:
Antes de pulsar una tecla:
Después de presionar una tecla:
Ejemplo-4: Para averiguar la tecla presionada desde el teclado.
html
<!DOCTYPE html>
<html>
<body>
<h1>
<center>Geeks for Geeks </center>
</h1>
<p>Type something in the box
to know the entered key:</p>
<input type="text"
size="40"
onkeydown="myFunction(event)">
<p id="gfg"></p>
<script>
function myFunction(event) {
var x = event.key;
document.getElementById(
"gfg").innerHTML =
"Entered Key is: " + x;
}
</script>
</body>
</html>
Producción:
Antes de pulsar una tecla:
Después de presionar una tecla:
Compatibilidad con navegadores: los navegadores enumerados admiten DOM Keyboard Event-
- Google cromo 1
- MozillaFirefox 1.5
- explorador de Internet 9
- Borde 12
- Safari 1.2
- Ópera 12.1
Publicación traducida automáticamente
Artículo escrito por riarawal99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA