Patrón de Claves Simplificado

Monday 5 de December, 2005, 22:02

Hace unos días publiqué una propuesta de manejo para el patrón estándar de claves en los formularios HTML. El ejemplo que mostré era una versión inicial de prueba y como comenté ahí, era susceptible de ser simplificado y mejorado. Efectivamente, acabo de publicar una versión mucho más simple que en lugar de hacer un complicado cambio y sincronización entre dos campos, uno tipo password y el otro tipo text, alterna el propio atributo type de un input. Esto tiene la ventaja de requerir menos operaciones, el código JavaScript es mucho más breve y simple y la mantención es menos compleja.

Para recapitular, la idea es proveer un mecanismo simple que permita que un usuario vea el contenido de un campo de tipo password si está en un ambiente seguro para verificar que lo que escribió está correcto.

El ejemplo usa CSS para presentar los campos y JavaScript para alternar la visibilidad de la clave. La función principal de JavaScript es la siguiente:

// Esta es la función que realiza el cambio de estado:
function showPass() {
// identificamos los elementos mediante DOM, primero el campo de clave y luego el botón:
o = document.getElementById(’clave’);
b = document.getElementById(’btnmostrar’);
// Comprobación básica: si ambos elementos existen…
if ( o && b ) {
// Si el campo de clave es de tipo ‘password’ se hace visible el contenido:
if ( o.type == ‘password’ ) {
o.type = ‘text’;
// Se actualiza el texto del botón:
b.value = ‘ocultar clave’;
} else {
// Si el campo de clave es de tipo ‘text’ se enmascara el contenido:
o.type = ‘password’;
// Se actualiza el texto del botón:
b.value = ‘mostrar clave’;
}
}
}

Como estamos usando el mismo campo y cambiando su atributo type, no es necesario sincronizar nada, el valor del atributo value continúa siendo el mismo pese al cambio del tipo.

Los invito a revisar el ejemplo simplificado para alternar la visibilidad de campos de claves.

Comentarios para 'Patrón de Claves Simplificado'

  1. 1URIel factor humano » Archivo » Patrón de Claves en Formularios, Monday 5 de December, 2005, 22:18

    […] 2005-12-05: Actualicé y simplifiqué el ejemplo, la nueva versión la puedes encontrar en Patrón de Claves Simplificado. […]

  2. 2URIRaspu, Tuesday 6 de December, 2005, 10:08

    Nelson, no creo que sea sólo yo, pero el ejemplo simplificado funciona sólo en los navegadores basados en Gecko. En Ópera y en IE nada de nada.

    Te cuento que yo también estuve viendo la forma de modificar sólo el atributo TYPE, pero la verdad es que es más complicado de lo que pensaba para que fuese compatible con los navegadores.

    Te dejo el link a un post en un foro donde puedes ver el estado en que va mi avance…

    http://www.overclockers.cl/foros/index.php?showtopic=157518

  3. 3URIRaspu, Tuesday 6 de December, 2005, 10:10

    nota: el link que puse ahi no muestra como va mi ejemplo, simplemente estoy tratando de averiguar como modificar el atributo TYPE y que sea crossbrowser.

  4. 4URInelson, Tuesday 6 de December, 2005, 11:16

    Buen dato Raspu, me dejé llevar por el entusiasmo y no probé en otros browsers, asumí que debía funcionar. Siempre está el método complicado de tener dos campos, pero sería ideal pder hacerlo con uno. En todo caso, estábamos sincronizados pensando en lo mismo, o comenzaste a buscar una solución a propósito de mi post? Pregunto sólo por curiosidad.

  5. 5URInelson, Tuesday 6 de December, 2005, 11:38

    Definitivamente, como comenta Raspu, en IE el atributo type para los inputs es read-only, salvo en ciertas excepciones que de todos modos complican mucho su uso:

    http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/type_7.asp

    Aún así, estoy seguro que se puede encontrar una solución efectiva y simple para el problema del cambio de tipo de un control password.

  6. 6URIVuarnet, Thursday 15 de December, 2005, 1:03

    Nelson: Me había entusiasmado con tu nota y estaba pensando que sería buena implemenrala en el caso de estos niños que comentaba en mi post, pero que la solución no sea cross browser lo hace inviable. Seguramente el 99.9% de mis usuarios usen IExplorer.

    Si consigues algo más, no dejes de avisar.

    Un abrazo
    Raúl

  7. 7URInelson, Thursday 15 de December, 2005, 14:30

    La verdad es que el primer ejemplo es más complejo pero funciona en IE y Gecko. El segundo ejemplo, el de este post, sólo funciona en Firefox. De todos modos, un lector me envió una solución compatible con IE pero no he tenido tiempo de publicarla.