Есть input в котором изначально указан type="password" По нажатию на кнопку нужно изменить тип на text. Как это реализовать?
-
Не надо ничего заменять. Скройте инпут пароля и покажите инпут текстовый.– Алексей Шиманский26 окт 2022 в 7:28
-
@АлексейШиманский, у меня внутри инпута есть кнопка, при нажатии на которую, пароль должен быть виден.– Stanislavkm26 окт 2022 в 7:33
-
И что это меняет?– Алексей Шиманский26 окт 2022 в 7:34
-
Ну а в целом w3schools.com/howto/howto_js_toggle_password.asp ... правда не знаю как это для vue будет– Алексей Шиманский26 окт 2022 в 7:35
4 ответа
У вас стоит в теге vue
. Поэтому даю ответ как сделать это на vue
.
Вам нужно установить на кнопку событие клик, при которой будет выполнятся функция @click="clickBtn"
.
В data()
добавить флаг для простоты решения isFlag: true
.
Далее в methods
записываете this.isFlag = !this.isFlag
. И с помощью тернарного оператора в инпуте выводите :type="isFlag ? 'password' : 'text'"
.
Все вместе выглядит так:
const app = new Vue({
el: '#app',
data() {
return {
inputType: '',
isFlag: true
}
},
methods: {
clickBtn() {
this.isFlag = !this.isFlag
console.log(this.isFlag)
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input :type="isFlag ? 'password' : 'text'">
<button @click="clickBtn">Click</button>
</div>
-
именно так и решил!) ниже в ответе описал ход решения. Вы же реализовали его. Спасибо!) 27 окт 2022 в 7:47
-
@Stanislavkm я даже не заметил, вашего ответа если честно. Оставлю вдруг кому пригодится. На будущее если пишите ответ на свой вопрос, оформляйте его как ответ, и помечайте галочкой. 27 окт 2022 в 9:28
Попробуй сделать два инпута. password и text. Повешай обработчки на password, который при нажати на него скроет password и покажет text
Решил так: Переменную задать булевскую. При клике на кнопку менять с true на false. type инпута связать с этой переменной ( если true, то в type записывать password, false-text).
function toggleViewPass() {
var x = document.getElementById("myInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
Password: <input type="password" value="pass" id="myInput">
<input type="checkbox" onclick="toggleViewPass()">Show Pass