5

Cómo puedo hacer para que al dar clic en el ícono del ojo me muestre la contraseña que está en el input?

<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>

<body>

  <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
    <i class="material-icons mdc-text-field__icon">visibility_off</i>
    <input type="password" class="mdc-text-field__input">
    <div class="mdc-notched-outline">
      <div class="mdc-notched-outline__leading"></div>
      <div class="mdc-notched-outline__notch">
        <label class="mdc-floating-label">Ingresa tu contraseña</label>
      </div>
      <div class="mdc-notched-outline__trailing"></div>
    </div>
  </div>

  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js">
  </script>
   <script>mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));</script>
</body>
   

Sé que con un toggle class podría cambiar la clase del ícono, el problema es que en material la clase de los iconos es la misma y solo cambia el "texto plano"

<i class="material-icons mdc-text-field__icon">visibility_off</i>

<i class="material-icons mdc-text-field__icon">visibility</i>

No quisiera tener que usar jQuery para cambiar el type="password" a type="text", pues la mayoría de ayuda que encuentro en la web es sobre jQ y no JS

Muuchas Gracias nuevamente :3

3 respuestas 3

5

Con esta funcion de JS podrías hacerlo, pero estoy viendo que no se puede clickar en el elemento <i> solo en el input. No se si esto será un problema en la estructura del html o de las clases utilizadas Si pruebas a cambiar el iconMostrar del evento por inputPassword veras que funciona al clickar en el input

EDIT: He añadido un ID a el input y a el icono para coger el elemento por el ID.

document.getElementById("spanMostrar").addEventListener("click", function(){
    var elementInput=document.getElementById("inputPassword");
    var elementIcon=document.getElementById("iconMostrar");
    if(elementIcon.classList.contains("active")){
        elementIcon.classList.remove("active");
        elementIcon.innerHTML = "visibility";
        elementInput.type="password";
    } else{
        elementIcon.classList.add("active");
        elementIcon.innerHTML  = "visibility_off";
        elementInput.type="text";
    }
});

document.getElementById("spanMostrar").addEventListener("click", function(){
    var elementInput=document.getElementById("inputPassword");
    var elementIcon=document.getElementById("iconMostrar");
    if(elementIcon.classList.contains("active")){
        elementIcon.classList.remove("active");
        elementIcon.innerHTML = "visibility";
        elementInput.type="password";
    } else{
        elementIcon.classList.add("active");
        elementIcon.innerHTML  = "visibility_off";
        elementInput.type="text";
    }
});
#container input {
  padding-right: 32px;
}

#spanMostrar {
  bottom: 16px;
  cursor: pointer;
  height: 25px;
  position: absolute;
  right: 10px;
  width: 25px;
  z-index: 10;
}

.form-clear .material-icons {
  font-size: 24px;
  position:absolute;
  top:0px;
  right:0px!important;
}
<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>

<body>

  <div id="container" class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
    <input id="inputPassword" type="password" class="mdc-text-field__input">
    <span id="spanMostrar" class="form-clear d-none"><i id="iconMostrar" class="material-icons mdc-text-field__icon">visibility</i></span>
    <div class="mdc-notched-outline">
      <div class="mdc-notched-outline__leading"></div>
      <div class="mdc-notched-outline__notch">
        <label class="mdc-floating-label">Ingresa tu contraseña</label>
      </div>
      <div class="mdc-notched-outline__trailing"></div>
    </div>
  </div>

  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js">
  </script>
   <script>mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));</script>
</body>

3
  • Gracias Jovi, tu respuesta se acerca mucho a lo que deseo, pero en realidad quisiera que solo funcionara al clicar en el icono, pues es más facil controlarlo así en pantallas táctiles
    – LauraZ
    Commented el 15 may. 2019 a las 12:17
  • Lo unico que le faltaria es el CSS para hacer el icono este por encima, he editado mi respuesta con algo de CSS, y el evento lo tiene el span ahora. Espero que te sirva
    – x3k
    Commented el 15 may. 2019 a las 12:50
  • Perfecto! Solo hice unos pequeños cambios para que el icono del ojo corresponda cuando se oculta o muestra, pero me sirvió de mucho
    – LauraZ
    Commented el 15 may. 2019 a las 14:28
1

También lo puedes hacer utilizando un button en lugar del i y le montas el icono con font awesome, de la siguiente manera.

<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

</head>

<body>

  <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
    <button class="fas fa-eye-slash" type="button" id="verLaClave">
    </button>
    <input type="password" class="mdc-text-field__input" id="clave">
    <div class="mdc-notched-outline">
      <div class="mdc-notched-outline__leading"></div>
      <div class="mdc-notched-outline__notch">
        <label class="mdc-floating-label">Ingresa tu contraseña</label>
      </div>
      <div class="mdc-notched-outline__trailing"></div>
    </div>
  </div>

  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
   <script>mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));</script>

<script>
        var elCampoDeClave = document.getElementById('clave');
        var laClave = document.getElementById('verLaClave');

        laClave.addEventListener('click', togglePass);

        function togglePass() {
            laClave.classList.toggle('active');
            (elCampoDeClave.type == 'password') ? elCampoDeClave.type = 'text' :
                elCampoDeClave.type = 'password';
        }

    </script>

</body>

1
  • Muchas gracias Diego por tu ayuda, pero no deseo cambiar el icono ni la ubicación :)
    – LauraZ
    Commented el 15 may. 2019 a las 12:15
1

Lo que yo haría sería sustituír el icon con role="button" que tienes en el textfield y reemplazarlo por un icon toggle, esto te permitirá cambiar automáticamente el icono visibility por visibility_off y además incluir un ripple effect.

En Diciembre de 2018 se abrió la petición para que puedan incluir estas funciones por defecto en el API del textfield. Kevin Franqueiro (uno de los autores del MDC para web) cerró varios hilos que hablaban al respecto, esto solo para que tengas en cuenta que la solución oficial aún no está disponible pero pronto lo estará.

Al añadir un icon toggle al textfield estás generando un desfase con los margins; para arreglarlo en lo que sacan la versión oficial, simplemente mete el textfield y el icon toggle como hijos de un div común, y el icon toggle lo haces flotar hacia la derecha haciendo un centrado de elementos, así obtendrás un buen resultado a nivel visual.

Es imposible hacer que cambie la propiedad type sin JS, en realidad los componentes MDC hacen ese trabajo sin que te des cuenta, pero ahí están, no es cosa solo de CSS, esos códigos controladores no hacen mas que quitar, añadir o modificar clases y parámetros del elemento HTML.

Lo que puedes hacer entonces es agregarle al toggle icon un .listen() con el evento correspondiente y ahí dentro, entrando al .root_ del objeto toggle icon puedes cambiar esas propiedades.

1
  • Gracias José por tu respuesta, la tendré en cuenta para mis futuras consultas. Un saludo!
    – LauraZ
    Commented el 5 ago. 2019 a las 15:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.