Home / Questions / 263632
Accepted
LauraZ
Asked: 2020-05-15 17:27:28 +0800 CST 2020-05-15 17:27:28 +0800 CST

Icon to show the password of an input with Material Web Components

  • 772

How can I make it so that when I click on the eye icon it shows me the password that is in the 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>

I know that with a toggle class I could change the class of the icon, the problem is that in material the class of the icons is the same and only the "plain text" changes

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

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

I don't want to have to use jQuery to change the type="password"to type="text", since most of the help I find on the web is about jQ and not JS

Thank you very much again :3

javascript

3 Answers

  1. Best Answer

    With this JS function you could do it, but I'm seeing that you can't click on the element <i>only on the input. I don't know if this is a problem in the structure of the html or the classes used. If you try to change the iconMostrarevent one, you'll inputPasswordsee that it works when you click on the input

    EDIT: I have added an ID to the input and to the icon to catch the element by the 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>

    • 5

  2. You can also do it using a button instead of the i and mount the icon with font awesome, as follows.

    <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

  3. What I would do is replace the icon with role="button" that you have in the textfield and replace it with an icon toggle, this will allow you to automatically change the visibility icon to visibility_off and also include a ripple effect.

    In December 2018, the petition was opened so that they can include these functions by default in the textfield API. Kevin Franqueiro (one of the authors of the MDC for web) closed several threads that talked about it, this just for you to take into account that the official solution is not yet available but it will be soon.

    By adding an icon toggle to the textfield you are creating an offset with the margins; to fix it in the official version, simply put the textfield and the icon toggle as children of a common div, and you make the icon toggle float to the right by centering the elements, so you will get a good result at a visual level.

    It is impossible to make the type property change without JS, actually the MDC components do that job without you realizing it, but there they are, it's not just a CSS thing, those controller codes do nothing more than remove, add or modify classes and HTML element parameters.

    What you can do then is add a .listen() to the toggle icon with the corresponding event and inside, entering the .root_ of the toggle icon object you can change those properties.

    • 1