En este post vamos a ver cómo evitar que el usuario presione “Enter” en un textarea de HTML para que no se puedan agregar nuevas líneas o saltos de línea.
Te voy a enseñar a prevenir que el usuario agregue más líneas dentro del textarea escuchando el evento del teclado, y a partir del mismo puedes hacer más cosas para prevenirlo al momento de copiar y pegar o arrastrar.
Vamos a usar un poco de JavaScript y escuchar el evento keydown
, que se desencadena cuando se presiona una tecla.
Recuerda que también existe keypress
y keyup
, pero en el keydown
es donde podemos evitar el evento ya que cuando los otros eventos se desencadenan ya es tarde para cancelarlos.
$textarea.addEventListener("keydown", (evento) => {
if (evento.keyCode === 13) {
evento.preventDefault();
}
});
El evento (debido a que tiene que ver con el teclado) traerá el código de la tecla que fue presionada. En este caso el Enter tiene el código 13
, entonces comparamos el keyCode
y en caso de que sea Enter prevenimos lo que el evento normalmente haría.
Puedes probar el resultado aquí: https://parzibyte.github.io/ejemplos-javascript/prevenir-enter-textarea/index.html y ver el código completo en: https://github.com/parzibyte/ejemplos-javascript/tree/master/prevenir-enter-textarea
Con esto solo estamos evitando el salto de línea en el textarea cuando el usuario escribe, pero existen más eventos como el de arrastrar y soltar texto o incluso el de pegar el contenido del portapapeles.
Aquí puedes hacer varias cosas. Cada que detectes un evento de tipo change
en el textarea podrías reemplazar los saltos de línea por una cadena vacía y colocar el resultado de nuevo en el textarea, o también puedes limpiar el contenido cuando el usuario presione el botón “Enviar”.
Por ejemplo, si vas a enviar un formulario entonces antes de enviar el formulario reemplaza el texto. Así no molestas al usuario mientras escribe.
Recuerda que si usas JS del lado del cliente solo deberías usarlo para indicarle al usuario lo que puede o no hacer, pero la verdadera validación debe ser del lado del servidor.
Si tú usas Vue entonces agrega el @keydown
a tu textarea
:
<textarea
@keydown="prevenirSaltosDeLinea"
class="textarea is-primary"
v-model="platilloDeOrden.comentarios"
placeholder="Sin picante, término medio, etcétera"
></textarea>
Fíjate que el listener es prevenirSaltosDeLinea
. En mi script tengo lo siguiente:
methods: {
prevenirSaltosDeLinea(evento) {
if (evento.keyCode === 13) {
evento.preventDefault();
}
},
}
Por aquí te dejo más tutoriales de JavaScript.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.