Limitación de caracteres por línea en un Textarea

Question

He estado buscando todo el fin de semana la solución a esta pregunta y todavía tengo que encontrar una solución que funcione correctamente. Lo que intento lograr es limitar el número de characiantes por línea en un área de texto, sin limitarlos de manera idéntica, pero con un número diferente de caracteres por línea de mi elección.

Por ejemplo:

1. quiero tener sólo 4 líneas en mi área de texto
2. Línea 1,2 y 3 se limitará a 24 caracteres
3. línea 4 tendrá un número ilimitado de caracteres

Esto es posible con un área de texto, o hay otra forma de hacerlo yo con una div o algo así. Me doy cuenta de que esto con toda probabilidad ha sido cubierto antes, pero encontrar un script de trabajo real que cubra este criterio ha resultado extremadamente difícil y no tengo el tipo de habilidad que se necesita para lograr estos resultados.

Gracias

Answer 1

A continuación se muestra una instantánea del problema que estamos tratando de resolver:

• 4 líneas en el área de texto (límite de esto en el área de texto en sí con filas = "4")
• líneas 1, 2, y 3 están limitados a 24 caracteres
• línea 4 tendrá un número ilimitado de caracteres

Snapshot del área de texto:

123456789
123456789
232323232323232323323232 
23232323232323232323236464536543654643 

JavaScript:

$('#your-input').keypress(function() { 
    var text = $(this).val(); 
    var arr = text.split("\n"); 

    if(arr.length > 5) { 
     alert("You've exceeded the 4 line limit!"); 
     event.preventDefault(); // prevent characters from appearing 
    } else { 
     for(var i = 0; i < arr.length; i++) { 
      if(arr[i].length > 24 && i < 3) { 
       alert("Length exceeded in line 1, 2, or 3!"); 
       event.preventDefault(); // prevent characters from appearing 
      } 
     } 
    } 

    console.log(arr.length + " : " + JSON.stringify(arr)); 
}); 

Esto se puede lograr utilizando un evento de pulsación de tecla. Cuando se activa el evento de pulsación de tecla, obtenga el valor actual del cuadro de texto y divida el valor en una matriz utilizando el carácter de salto de línea \n como delimitador.

• La longitud de la matriz le indica cuántas líneas tiene. Si ha excedido esas líneas, activamos una alerta.
• La longitud de cada cadena individual dentro de la matriz representa la longitud de cada línea. Usamos un ciclo for para verificar las primeras 3 líneas. Si excedemos la longitud de 24, activamos una alerta.
• Ignoramos la última iteración del ciclo, ya que no nos preocupa la longitud de la última línea.

Esto no está diseñado para ser una solución completa, pero esto definitivamente le permitirá comenzar y proporcionarle algo que puede modificar para adaptarlo a sus necesidades. ¡Buena suerte!