Quiero crear una entrada de contraseña moderna, con un botón de alternancia de contraseña que cambie el tipo de entrada.
Problema:
Hice todo lo siguiente, pero cuando lo pruebo y hago clic en el icono, no cambia nada.
function toggle_password() { const input = getElementById("toggle_password"); if (input.type === "password") { input.type = "text"; } else { input.type = "password"; } } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/> <div> <i class="fa fa-eye" aria-hidden="true" id="toggle_password" onClick="toggle_password()"></i> <input id="toggle_password" class="align from_Input password" type="password" placeholder="Password" required /> </div> Y aquí hice la función toggle_password .
Primero, es document.getElementById , getElementById es un método dentro del objeto del document .
En segundo lugar, el ícono y la entrada tienen la misma identificación, el atributo de id debe ser único (cambié la identificación de entrada a toggle_password__input ).
function toggle_password() { const input = document.getElementById("toggle_password__input"); if (input.type === "password") { input.type = "text"; } else { input.type = "password"; } } <div> <i class="fa fa-eye" aria-hidden="true" id="toggle_password" onClick="toggle_password()" >toggle</i> <input id="toggle_password__input" class="align from_Input password" type="password" placeholder="Password" required /> </div>Está utilizando la misma identificación en dos entradas diferentes. Dado que el id toggle_password aparece primero en el elemento <i> <i> , se estaba teniendo en cuenta <i>
También faltaba el document en const input = document.getElementById("password");
PROBLEMA: Verifique el registro cuando haga clic en el ícono, está guardando <i> en la variable de entrada.
function toggle_password() { const input = document.getElementById("toggle_password"); console.log(input) if (input.type === "password") { input.type = "text"; } else { input.type = "password"; } } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/> <div> <i class="fa fa-eye" aria-hidden="true" id="toggle_password" onClick="toggle_password()"></i> <input id="toggle_password" class="align from_Input password" type="password" placeholder="Password" required /> </div>Solución:
Asigne una identificación diferente al elemento de contraseña <input> y use esa identificación para obtener el elemento. Entonces guardará el elemento <input> en la variable de entrada.
function toggle_password() { const input = document.getElementById("password"); console.log(input) if (input.type === "password") { input.type = "text"; } else { input.type = "password"; } } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/> <div> <i class="fa fa-eye" aria-hidden="true" id="toggle_password" onClick="toggle_password()"></i> <input id="password" class="align from_Input password" type="password" placeholder="Password" required /> </div>Puede simplificar tanto su marcado como su secuencia de comandos como se muestra a continuación:
document.querySelector(".fa-eye").onclick=ev=>{ let inp=ev.target.nextElementSibling; inp.type=inp.type==="password"?"text":"password"; } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/> <div> <i class="fa fa-eye" aria-hidden="true"></i> <input class="align from_Input password" type="password" placeholder="Password" required /> </div>