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