Listado completo de tutoriales

Control PASSWORD

Este control HTML es una variante de la de tipo "TEXT". La diferencia fundamental es que cuando se carga un texto en el campo de edición sólo muestra asteriscos en pantalla, es decir, es fundamental para el ingreso de claves y para que otros usuarios no vean los caracteres que tipeamos.

La mayoría de las veces este dato se procesa en el servidor, pero podemos en el cliente (es decir en el navegador) verificar si ha ingresado una cantidad correcta de caracteres, por ejemplo.

Ejemplo: Codificar una página que permita ingresar una password y luego muestre una ventana de alerta si tiene menos de 5 caracteres.

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <form>
        Ingrese una clave:
        <input type="password" id="clave">
        <br>
        <input type="button" value="Confirmar" onClick="verificar()">
    </form>

    <script>
        function verificar() {
            let clave = document.getElementById('clave').value;
            if (clave.length < 5) {
                alert('La clave no puede tener menos de 5 caracteres!!!');
            } else {
                alert('Largo de clave correcta');
            }
        }
    </script>

</body>

</html>

En este problema debemos observar que cuando ingresamos caracteres dentro del campo de edición sólo vemos asteriscos, pero realmente en memoria se almacenan los caracteres tipeados. Si queremos mostrar los caracteres ingresados debemos acceder mediante el método getElementById a la marca HTML clave:

            let clave = document.getElementById('clave').value;

Normalmente, a este valor no lo mostraremos dentro de la página, sino se perdería el objetivo de este control (ocultar los caracteres tipeados).

Si necesitamos saber la cantidad de caracteres que tiene un string accedemos a la propiedad length que retorna la cantidad de caracteres.

    if (clave.length<5)

Retornar