Textarea controlada
Este script controla el número de caracteres que se están introduciendo en un textarea de un formulario. Puede usarse para limitar el tamaño del texto ademitido.
En esta aplicación limita el número máximo de caracteres.
Solución
<script>
function calcLong(maximo, ctrl)
{
let txt = event.target;
let numCars = event.target.parentElement[ctrl];
if (txt.value.length > maximo){
txt.value = txt.value.substring(0,maximo);
}
numCars.value = txt.value.length;
}
</script><body>
<form action="" method="post" name="form1">
<p>Llevas<input name="caracteres" type="text" id="caracteres" value="0" size="4">caracteres escritos.
</p>
<p>El límite es de 11. </p>
<textarea name="textarea" cols="40" rows="6" onKeyUp="calcLong(11,'caracteres')"></textarea>
</form>
</body>
Explicación
El cuadro de texto está dentro de un formulario y tiene asignada la función calcLong(m, c) al evento keyUp.
Esta función lee el objeto que lanzó el evento y lo guarda en la variable txt y el campo donde anotar el número de caracteres lo extrae del romulario, que es el elemento padre del textarea. Usa como indice el nombre del campo (segundo argumento de la función).
Comprueba que el numero de caracteres no es superior al máximo (primer argumento de la función). Si es mayor no deja escribir más y recorta el texto a la longitud máxima.
Por último anota el número de caracteres en el campo del formulario para controlar cuantos caracteres se han escrito.
Como lo uso
Para probar el script puedes usar este formulario que contiene un campo de texto en el que se permite un máximo de 11 caracteres.
Observa la vinculación con la función
calcLong() encargada de controlar la longitud del texto, que en este
caso no deberá superar
los 11 caracteres.