Cómo limitar el número de caracteres por línea en el área de texto a un valor fijo

Question

En mi área de texto, debería poder ingresar solo 72 caracteres por línea. Si utilizo la propiedad cols establecida en 72, está permitiendo más o menos cantidad de caracteres dependiendo del ancho del carácter.

¿Alguien puede ayudar a cómo hacerlo?

Answer 1

Usted puede llamar a esto en forma de presentar (onsubmit) o ​​al pulsar las teclas del campo de texto o lo que sea

if (document.yourformname.textareaname.value.length > maxchars) { 
// too many 
} 

de edición: se trata de Javascript. Por supuesto, también querrá validar el lado del servidor.

Answer 2

Verificaría cada vez que hay un evento onkeypress, cuál es la longitud actual de la línea, y luego insertaré un corte en el espacio anterior más próximo cuando exceda 72. La dificultad si el usuario pega en un bloque de texto; entonces, tendrías que verificar todas las longitudes de línea entre la posición anterior del cursor y la nueva, lo cual es un problema. Querrá guardar la última posición del cursor cada vez que presione una tecla y observar si hay un salto.

Hay código para obtener y establecer la posición del cursor here.

Answer 3

duplicados de Textarea Limit characters per line Jquery or Javascript

<TEXTAREA NAME="HARD" COLS="72" ROWS="5" WRAP="HARD"> 

Answer 4

Yo tenía el mismo problema y trató de resolverlo con JavaScript. ¿Por qué no simplemente tomar el código HTML sugerido por Juan Mendes?

Bueno, es bastante simple: realmente no funciona el navegador cruzado, o al menos con Firefox 25 en Ubuntu, el número máximo de caracteres por línea parece estar limitado por el ancho del texto y, dependiendo del tamaño de la fuente, pude ingrese + -1 letra. Pero quería que el número de caracteres por línea se limitara a un valor específico, sin importar el ancho del área de texto. Así me ocurrió con este código:

var maxLength = 3; 
$('#mytext').on('input focus keydown keyup', function() { 
    var text = $(this).val(); 
    var lines = text.split(/(\r\n|\n|\r)/gm); 
    for (var i = 0; i < lines.length; i++) { 
     if (lines[i].length > maxLength) { 
      lines[i] = lines[i].substring(0, maxLength); 
     } 
    } 
    $(this).val(lines.join('')); 
}); 

También he preparado un jsFiddle.Espero que esto ayude a alguien :)

Y al final sólo una breve explicación de cómo funciona este código:

• La función espera para uno de los siguientes eventos: entrada, el enfoque, keydown, keyup (se puede parecer un poco innecesario usar estos muchos eventos, pero probé mucho para encontrar esta combinación que funciona con navegador cruzado y siempre dispara, no importa si solo se ingresan letras individuales, la tecla se presiona continuamente o el texto se pega en el área de texto)
• obtiene el valor del área de texto
• y luego divide el área de texto en cada salto de línea en un nuevo elemento RRay
• el bucle for itera más de esta matriz y los controles para cada línea, respectivamente elemento de la matriz, si es superior a la antes de establecer maxLength
• si una línea excede el maxLength, la línea es "cortado" después de caracteres maxLength
• al final, cuando no hay una línea izquierda, que es más largo que los personajes maxLength, los elementos de la matriz se unen entre sí en una cadena de nuevo

EDIT: la única restricción que descubrí ahora, es que al entrar un carácter adicional al principio o dentro de la línea, el código "corta" la cadena al final y no donde los caracteres tienen sido agregado. Esto no importará en la mayoría de los casos, pero téngalo en cuenta :) De todos modos, no debería ser demasiado difícil cambiar esta función de forma apropiada, pero en la mayoría de los casos será una pérdida de recursos;)

Answer 5

Pruebe esto para el servidor lado addtionally. Puedes hacerlo en cualquier idioma. No solo PHP

if (strlen($textareaContent) <= 72) { 
    // Save textareaContent 
} 
else { 
    echo "Your text is longer than 72 characters."; 
} 

Answer 6

Comprobar esto:

var t=document.getElementById('textAreaId').value; 
if(/^(?:[^\n]{0,73}\n)*$/g.test(t) !== true){ 
alert('input is invalid'); 
} 

Answer 7

Una pequeña adición para completar una solución anterior.
También limito el número de líneas.

Me sirve en sistemas antiguos donde un comentario de 4 líneas se guarda en 4 entradas de la base de datos.

<textarea id="mytext" rows = "4" style="width:300px"></textarea> 

$(function() { 

    var maxLength = 30; 
    var mawRow = 4; 

    $('#mytext').on('input focus keydown keyup', function() { 

     //get Textearea text 
     var text = $(this).val(); 

     //Split with \n carriage return 
     var lines = text.split("\n"); 

     for (var i = 0; i < lines.length; i++) { 
      if (lines[i].length > maxLength) { 
       lines[i] = lines[i].substring(0, maxLength); 
      }  
     } 

     //On supprime ce qui dépasse... :) 
     while (lines.length > 4){  
      lines.pop(); 
     } 

     //Join with \n. 
     //Set textarea 
     $(this).val(lines.join("\n")); 
    }); 
});