Capturar el ENTER en un TextArea y anularlo con Javascript

Hace tiempo necesitaba que dentro de un textarea no funcionara la tecla ENTER. Después de un corto tiempo logre fabricar un Script en Javascript que lograba esto, el cual postee en foros del web, pero realizando una revisión del script note un gran falló.

Al mantener presionada la tecla ENTER, fallaba. Por lo cual idee un nuevo procedimiento, del cual se genero un nuevo algoritmo. Primero expondré cómo realice el script la primera vez y luego el script que soluciona de manera satisfactoria el problema:

Suprimir acción de la tecla ENTER en Textarea

Código :

/* Suprimir el uso de la tecla ENTER en Textarea
  Autor: John Sánchez Alvarez
  Este código es libre de usar y modificarse*/

//Valida que no sean ingresado enter dentro del textarea
function Textarea_Sin_Enter($char, $mozChar, $id){
   //alert ($char+" "+$mozChar);
   $textarea = document.getElementById($id);
   niveles = -1;
    
   if($mozChar != null) { // Navegadores compatibles con Mozilla
       if($mozChar == 13){
           if(navigator.appName == "Opera") niveles = -2;
           $textarea.value = $textarea.value.slice(0, niveles);
       }
   // navegadores compatibles con IE
   } else if($char == 13) $textarea.value = $textarea.value.slice(0,-2);
}

Como se utiliza

Código :

<textarea name="textarea1" id="textarea1" onkeyup="Textarea_Sin_Enter(event.keyCode, event.which, 'textarea1');"></textarea>

Cuando un usuario presiona la tecla ENTER dentro de un textarea se genera un salto de linea. La idea es que al presionar ENTER no ocurra dicho salto.

En el código en HTML podemos ver la utilización del evento onkeyup. Este evento es invocado después de soltar una tecla dentro del Textarea (para este caso). al oprimir la tecla ENTER en Opera (por ejemplo) obtenemos para event.keyCode el valor de 13 y para event.which el valor de 13. Mientras que en IE obtenemos para event.keyCode el valor de 13 y para event.which el valor undefined.

También podemos observar que se utilizo el método slice el cuál sirve para extraer una parte de un string.

La idea básica era identificar que tecla se pulso. Si es ENTER event.keyCode y event.which obtiene el número 13. Si es 13 lo que debe hacer es borrar el último o los dos últimos caracteres (En el caso de Opera e IE)

Pero al mantener presionada la tecla ENTER. borraba el primer salto generado por el primer ENTER, pero posteriormente escribía los demás saltos. Cambie el evento de onkeyup a onkeypress, solo funcionaba si se mantenía presionada la tecla ENTER, por lo cual se generaba al menos 1 salto de línea. al utilizar ambos eventos al mismo tiempo funcionaba pero iba eliminando el último carácter escrito si se mantenía presionado ENTER.

Después de un buen rato de analizar y cambiar los posibles errores se me ocurrió otra manera de solucionarlo:

Suprimir acción de la tecla ENTER en Textarea (Problema del ENTER presionado solucionado)

Código :

/* Suprimir el uso de la tecla ENTER en Textarea 
  Autor: John Sánchez Alvarez 
  Este código es libre de usar y modificarse*/ 

//Me permite remplazar valores dentro de una cadena
function str_replace($cambia_esto, $por_esto, $cadena) {
   return $cadena.split($cambia_esto).join($por_esto);
}

//Valida que no sean ingresado ENTER dentro del textarea
function Textarea_Sin_Enter($char, $id){
   //alert ($char);
   $textarea = document.getElementById($id);
   
   if($char == 13){
      $texto_escapado = escape($textarea.value);
      if(navigator.appName == "Opera" || navigator.appName == "Microsoft Internet Explorer") $texto_sin_enter = str_replace("%0D%0A", "", $texto_escapado); 
      else $texto_sin_enter = str_replace("%0A", "", $texto_escapado);
      
      $textarea.value = unescape($texto_sin_enter); 
   }
}

Como se utiliza

Código :

<textarea id="mensaje_actualizacion_home" name="mensaje_actualizacion_home" onkeyup="Textarea_Sin_Enter(event.keyCode, this.id);" onkeypress="Textarea_Sin_Enter(event.keyCode, this.id);"></textarea>

Cambie la idea general del primer algoritmo. Debido a que el problema se basaba en el ENTER se me ocurrio que si de alguna forma podía identificar un valor para ENTER, con borrar dicho valor se debía evitar el salto de línea. Pensando en eso llego a mis recuerdos el hecho de que cualquier textos al ser escapados en javascript convierte todos los caracteres incluso los ocultos como el del ENTER en un valor. Por lo cuál si borramos el valor de escape del ENTER, en si borraría la acción del ENTER.

Primero se identifica que la tecla pulsada sea el ENTER para lo cual bastaba con mirar el valor arrojado por event.keyCode, que para todos los navegadores era 13. Si era 13 escapábamos el texto con escape() el cual convierte todos los caracteres a su código ASCII.

En el caso de Opera e IE el ENTER es %0D%0A (Lo cual explica por que en el algoritmo previo era necesario borrar 2 caracteres) en el resto de navegadores es %0A. Utilizando una pequeña función de remplazo de texto en javascript (str_replace que es la primera función) los eliminaba del texto. y se volvia a copiar el textos despues de eliminar el escape con unescape.

Nota: Se tiene que utilizar los eventos onkeyup y onkeypress. Ya que si se utiliza solo onkeyup el solo elimina el primer ENTER cuando se mantiene presionado. Y si se utiliza solo el evento onkeypress este elimina los ENTER subsecuentes pero no el primero.

Bueno espero que este pequeño tip le sirva algunas personas que se enfrenten a problemas de la misma índole. Como se puede observar ampliando la idea general del segundo algoritmo se puede solucionar problemas similar.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.