El evento keydown se activa cuando se pulsa la tecla.
El evento keyup se activa cuando una tecla que se encuentra presionada se deja de pulsar.
Confeccionaremos una página que solicite un nombre de usuario el cual no puede tener el espacio en blanco. En caso que el operador ingrese dicho caracter mostraremos un mensaje y no agregaremos dicho caracter.
pagina.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
</head>
<body>
<form action="" method="post">
<p>Nombre de usuario:<input type="text" id="usuario" size="20"></p>
</form>
<script src="funciones.js"></script>
</body>
</html>
funciones.js
document.getElementById('usuario').addEventListener('keydown', (e) => {
let tecla = e.key
if (tecla == ' ') {
e.preventDefault()
alert('No se puede ingresar espacios en blanco para un nombre de usuario')
}
})
Capturamos la presión de las teclas dentro del control input mediante el vente 'keydown' y mediante una función anónima verificamos si se presiona la tecla espaciadora:
document.getElementById('usuario').addEventListener('keydown', (e) => {
let tecla = e.key
if (tecla == ' ') {
e.preventDefault()
alert('No se puede ingresar espacios en blanco para un nombre de usuario')
}
})
En el caso que se haya ingresado un espacio se evita el ingreso del mismo llamando al método 'preventDefault()' y mostrando un mensaje.