Hoy estaba diseñando un formulario HTML, que entre otras cosas contiene text boxes (INPUT) que permiten un largo máximo de caracteres (maxlength).
Se me ocurrió que estaría bueno que al costado de dichos text boxes apareciera información sobre la cantidad de caracteres que quedan disponibles.
Para ello, y como alternativa a un DIV, creé un text box adicional al costado del que acepta los datos del usuario. Ese text box tiene un aspecto distinto, con el color del texto más claro, y sin bordes. La idea es que sólo sirva para comunicar al usuario cuántos caracteres tiene disponibles para seguir escribiendo.
Para que este nuevo text box no pueda ser editado por el usuario, le agregué la cláusula "readonly" dentro del tag INPUT, pero me seguía quedando un problema: si el cursor estaba en el text box donde se ingresa el texto, y pulsaba la tecla de tabulación para pasar el cursor al siguiente campo editable, me dejaba el foco en el text box readonly.
Buscando la forma de que esto no pasara, probé algunas cosas como la cláusula "disabled", que si bien solucionaba el problema, me inhabilitaba a poner una cláusula "title", con la que debía contar en este caso.
La mejor solución que encontré finalmente fue usar la cláusula "tabindex". Esta cláusula permite definir un órden en la secuencia de focos de los controles. Se usa poniendo tabindex=n, donde "n" es un número de 0 a 32767. Ahora bien, resulta que si le asignamos un valor "-1", logramos que dicho text box
no sea considerado entre las etiquetas que toman foco mediante la pulsación de tabulador.
Hasta ahora las pruebas las he hecho en Firefox 2.0 y en Internet Explorer 6.0 y anda perfectamente en ambos.
Powered by ScribeFire.
Entradas
