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.