Ho creato un form ma riscontrando problema nella visualizzazione della password nel campo conferma password; se clicco sull'occhio in conferma:_passord mi visulaizza la password ma se clicco nuovamente non la nasconde ....
Volendo qui il link http://www.all-forevents.com/moduloutente.htm
Il codice jquery usato è il seguentecodice HTML:<html><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" /><script src="https://code.jquery.com/jquery-3.6.2.min.js"></script><body> <style> .form-group {position: relative;} .bi-eye-slash { display:block; color: 1px solid red; z-index:1000; cursor: pointer; position: absolute; top: 4px; left:250px; } #password_rules ul li { /*font-size: 12px; font-weight: normal;*/ color: #000000; } #password_rules ul li.complete { color: #5DB406; }</style><h4 align=center>Modifica dati utente</h4> <form class="form-horizontal" method="POST" name="modello" action="updateutente.asp"><input type ="hidden" name="IDut" value="<%=IDdip%>"> <div class="area-form"><div class="form-group"><label class="control-label" for="pwd">Password</label><input type="password" id="password" name="password" class="form-control inputstl" value="<%=password%>"><i class="bi bi-eye-slash" id="togglePassword"></i></div> <div class="form-group"><label class="control-label" for="conferma_password">Nuova password</label><input type="password" name="conferma_password" id="cfpwd" class="form-control inputstl"><i class="bi bi-eye-slash" id="cftogglePassword"></i></div> <div id="password_rules"> <h4>La password deve avere le seguenti caratteristiche:</h4> <ul> <li class="password_length">Almeno 8 caratteri</li> <li class="password_uppercase">Almeno una lettera maiuscola</li> <li class="password_number">Almeno un numero</li> <li class="password_match">Le password devono corrispondere</li> </ul> </div> <div class="text-center"> <button type="submit" class="btn btn-primary">Salva</button> <button type="reset" class="btn btn-primary">Annulla</button> </div> </div> </form>
codice HTML:<script> const togglePassword = document.querySelector('#togglePassword');const password = document.querySelector('#password');togglePassword.addEventListener('click', () => { // Toggle the type attribute using // getAttribure() method const type = password .getAttribute('type') === 'password' ? 'text' : 'password'; password.setAttribute('type', type); // Toggle the eye and bi-eye icon this.classList.toggle('bi-eye'); }); const cftogglePassword = document.querySelector('#cftogglePassword');const password1 = document.querySelector('#cfpwd');cftogglePassword.addEventListener('click', () => { // Toggle the type attribute using // getAttribure() methodconst type1 = password1.getAttribute('type') === 'password' ?'text' : 'conferma_password'; password1.setAttribute('type', type1); // Toggle the eye and bi-eye icon this.classList.toggle('bi-eye'); }); </script>
Rispondi quotando