Prevenir salto de línea en textarea de HTML

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.

Evitar que usuario presione Enter en textarea

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

Otros enfoques

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.

Bonus: usar Vue

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.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *