Skip navigation

Por lo general, cuando se trabaja con formularios en HTML la idea es usarlos para recopilar información que se almacenará en una base de datos. Como el espacio en estas es siempre valioso, se suele diseñarlas de modo que los campos dentro de un registro almacenen la cantidad estrictamente necesaria de datos. Los controles INPUT de tipo “text” interactúan bien con esta restricción gracias a su atributo “maxlength”. Pero, ¿qué ocurre si la información que deseamos recopilar es un texto largo? Para comodidad de quienes usen nuestros formularios nos valdremos de controles TEXTAREA multilínea.

En este punto encontramos un problema: el control TEXTAREA no tiene un atributo “maxlength” con el que podamos controlar la cantidad de caracteres que se digita en él. Y si bien es posible hacer una validación de la información en el formulario antes de su envío para lidiar con este inconveniente, los usuarios esperan de nosotros soluciones más elegantes.

Buscando ideas para limitar la cantidad de texto introducido en un control TEXTAREA mientras el usuario escribe, encontré una interesante función escrita en JavaScript hace más de seis años, a la que le hice pequeñas modificaciones para lograr lo que tenía en mente. La función que encontré fue publicada por Nannette Thacker. Ahora bien, modificada por mí quedó así:

// <![CDATA[
language=”JavaScript” type=”text/JavaScript”>
// ]]>
<!–
function textCounter(field,cntfield,maxlimit) {
if (field.value.length > maxlimit)
{
field.value = field.value.substring(0, maxlimit);
cntfield.value = maxlimit – field.value.length;
alert(‘Se borró el final de su texto para no exceder el límite de ‘+maxlimit+’ caracteres.’);
}
else
cntfield.value = maxlimit – field.value.length;
}
//–>
</script>

Las dos líneas que añadí a la función original tienen la misión de hacerla más práctica. Actualizar la cantidad de caracteres disponibles incluso cuando el límite ya ha sido excedido es útil si el usuario introduce varios caracteres a la vez pegándolos en el control TEXTAREA desde la memoria del sistema. Mostrar un mensaje en el momento en que se excede el límite de caracteres permitidos evita que usuarios descuidados introduzcan un texto indebidamente truncado en nuestra base de datos si, como es común, lo copian y pegan “mecánicamente”.

¿Cómo se implementa esta función en el formulario? Aquí hay un ejemplo:

action=”” method=”POST” name=”registro_ins”>

<p>resumen del Proyecto propuesto:</p>
name</span>=”pro_text” cols=”60″ rows=”15″ wrap=”VIRTUAL”
onKeyDown=”textCounter(document.registro_ins.pro_text, document.registro_ins.txt_textCounter, 10000)”
onKeyUp=”textCounter(document.registro_ins.pro_text, document.registro_ins.txt_textCounter, 10000)”
onMouseMove=”textCounter(document.registro_ins.pro_text, document.registro_ins.txt_textCounter, 10000)”
onMouseOut=”textCounter(document.registro_ins.pro_text, document.registro_ins.txt_textCounter, 10000)”>
</textarea>
<p>de 10000 caracteres disponibles para el resumen le quedan:
readonly type=”text” name=”txt_textCounter” size=”6″ maxlength=”5″ value=”10000″>
</p>
name=”btn_submit” type=”submit” value=”registrar Proyecto propuesto”>
</form>

Al implementar la función, añadí su ejecución en los eventos “onMouseMove” y “onMouseOut” para lograr que el pegado de texto con el mouse actualice correctamente el contador de caracteres disponibles. No es difícil notar cómo funciona el resto.

Anuncios