1

Есть input в котором изначально указан type="password" По нажатию на кнопку нужно изменить тип на text. Как это реализовать?

4

4 ответа 4

0

У вас стоит в теге 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>

2
  • именно так и решил!) ниже в ответе описал ход решения. Вы же реализовали его. Спасибо!) 27 окт 2022 в 7:47
  • @Stanislavkm я даже не заметил, вашего ответа если честно. Оставлю вдруг кому пригодится. На будущее если пишите ответ на свой вопрос, оформляйте его как ответ, и помечайте галочкой. 27 окт 2022 в 9:28
0

Попробуй сделать два инпута. password и text. Повешай обработчки на password, который при нажати на него скроет password и покажет text

0

Решил так: Переменную задать булевскую. При клике на кнопку менять с true на false. type инпута связать с этой переменной ( если true, то в type записывать password, false-text).

0

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.