Tengo un proyecto que tiene una combinación de: php (laravel) en el backend Y en el front-end de javascript+css+html.
mi estrategia:
MI PROBLEMA:
pero, debido a la propiedad livewire dentro de la etiqueta de entrada, después de mostrar los dígitos de la contraseña, al escribir más dígitos de contraseña, ¡los números de contraseña se convierten a * nuevamente!
propiedad livewire que se usó dentro de la etiqueta de entrada: wire:model.debounce.700ms="password" .
Creo que es por eso: el livewire, recarga la etiqueta de entrada.
¿Alguien sabe la solución?
el div, que contiene la contraseña de entrada y el ícono del ojo (para hacer clic por el usuario para mostrar los dígitos de la contraseña):
<div class="o-form__field-frame o-form__field-frame--password @error('password') has-error @enderror"> <input type="password" wire:model.debounce.700ms="password" id="password" value="{{$password}}" placeholder="PLEASE INSERT YOUR PASSWORD" class="o-form__field"> <i class='fa fa-eye hSh_eye_show_pass' onclick='showPass()'></i> </div>la función que maneja eso:
//for show pass: function showPass(){ document.getElementById('password').type="text"; }Dado que livewire cambia las cosas de entrada, podría tener una segunda input de tipo text oculta y, si el usuario hace clic, se muestra la otra entrada en su lugar:
// used for being able to apply the inputs values correctly.. // u can omit that this is only for making code snippet working.. let pwHidden = true function togglePassVisibility() { const passVisible = document.getElementById('password-visible') const passHidden = document.getElementById('password-hidden') // toggle the .hidden class on both.. passVisible.classList.toggle('hidden') passHidden.classList.toggle('hidden') // make this code snippet work since I cannot access {{$password}} // you can omit this.. if(pwHidden) { passVisible.value = passHidden.value } else { passHidden.value = passVisible.value } pwHidden = !pwHidden } .hidden { display: none; } <!-- you need ofc to pass {{$password}} as value to make it work in your environment. --> <input type="text" class="hidden" id="password-visible"></input> <input type="password" id="password-hidden"></input> <button onClick="togglePassVisibility()">toggle</button>