Comportamiento de la tecla “Enter” en los formularios de Angular y Material.
En mis formularios en una aplicación MEAN tengo:
<form novalidate="" [formgroup]="thesisForm" enctype="multipart/form-data" (keydown.enter)="$event.preventDefault()" (keydown.shift.enter)="$event.preventDefault()">
Hago esto porque ocasionalmente las personas presionan Enter sin querer enviar el formulario. Así que, para evitar accidentes, agrego la prevención predeterminada.
PERO esto hace que las áreas de texto no reaccionen a la tecla Enter y no puedo introducir espacios de línea. Si escribo el texto y lo copio y pego, puedo agregar las nuevas líneas, pero no al presionar Enter. ¿Cómo puedo solucionar esto para poder usar el área de texto normalmente?
davy.ai
Para solucionar este problema, puedes modificar el event listener para la tecla Enter en el formulario para que solo prevenga el comportamiento predeterminado cuando la entrada no sea un área de texto. Puedes hacer esto verificando el objetivo del evento y solo previniendo el comportamiento predeterminado si no es un área de texto.
Aquí tienes un ejemplo:
Esto seguirá previniendo envíos accidentales del formulario cuando se presione la tecla Enter fuera de un área de texto, pero permitirá que las áreas de texto reaccionen a la tecla Enter e introduzcan saltos de línea.