Переключение видимости пароля
Я пытаюсь использовать функцию машинописного текста на своей странице, чтобы изменить значок, который переключает видимость пароля. вот как это должно работать: я нажимаю кнопку (в данном случае кликабельный значок), значок меняется, и свойство «тип» во входных данных должно измениться на «текст», чтобы пользователь мог видеть, что у него есть. введено в это поле. затем при повторном нажатии значок должен измениться на значение по умолчанию, а тип ввода должен вернуться к «пароль».
это мой код:
togglePasswordVisibility() {
document.querySelector("#input2").setAttribute("type", "password")
document.querySelector("#passwordIcon").setAttribute("name", "eye-off")
if (document.querySelector('#passwordIcon').getAttribute('name') == 'eye-off') {
document.querySelector('#passwordIcon').setAttribute("name", "eye")
}
проблема в том, что это работает только один раз, а я хочу, чтобы это работало несколько раз. Кто-нибудь может мне помочь?
Ответы 2
Ваш код в основном гласит:
- Установите тип
password - Если тип
password, установите его наtext.
Но вторая часть всегда будет верной, поэтому это работает только один раз. Поэтому вам следует изменить его на:
togglePasswordVisibility() {
if (document.querySelector('#passwordIcon').getAttribute('name') == 'eye-off') {
document.querySelector("#input2").setAttribute("type", "text")
document.querySelector('#passwordIcon').setAttribute("name", "eye-off");
} else {
document.querySelector("#input2").setAttribute("type", "password");
document.querySelector("#passwordIcon").setAttribute("name", "eye");
}
}
попробовал ваш код, и он сработал, но наоборот, поэтому я изменил первый оператор на if (document.querySelector("#passwordIcon").getAttribute("name") == "eye"), а третий оператор на document.querySelector("#passwordIcon").setAttribute("name", "eye-off")" , и все работает отлично!!! Спасибо за помощь мне!
Вместо реализации этой функциональности с помощью JS, если вы используете последнюю версию ionic v8, то по умолчанию она предоставляет компонент ion-input-password-toggle, обеспечивающий поведение изменения видимости текста внутри ввода при нажатии кнопки.
<ion-input type = "password" label = "Password" value = "YourPassword">
<ion-input-password-toggle slot = "end"></ion-input-password-toggle>
</ion-input>
я попробовал, но он не работает должным образом, и документация по этому компоненту слишком расплывчата :(
Можете ли вы поделиться своим кодом с этими изменениями, потому что мне хотелось бы знать, с какой проблемой вы столкнулись?
уже решил это с помощью другого решения: p тем не менее, я думаю, что документация не так объективна, как должна быть. Единственное, что говорят, это поставить тег <ion-input-password-toggle> и больше ничего
Это не похоже на угловой код. Пожалуйста, добавьте более конкретные теги, такие как javascript.