CODEWITHSUNDEEP
javascriptvue.js
DD DD
DD DD

Reputation: 1238

How to delete All string in input tag using Vue

I want to make password input using type 'text' not 'password.

<input type="text" v-model="form.password" @input="test" />
<input type="hidden" v-model="form.hiddenPassword" />

So I made some methods for my goal. When I put 'a', it be changed to * and 'a' is in hiddenPassword.

   test(e) {
      if (e.inputType === "deleteContentBackward") {
        this.form.hiddenPassword = this.form.hiddenPassword.substr(
          0,
          this.form.hiddenPassword.length - 1
        );
        this.form.password = this.masking(this.form.hiddenPassword);
        console.log(this.form.hiddenPassword);
      } else {
        this.form.hiddenPassword =
          this.form.hiddenPassword +
          this.form.password.substr(this.form.password.length - 1);
        this.form.password = this.masking(this.form.hiddenPassword);
      }
    },
    masking(input) {
      const lng = input.length;
      let maskingResult = "";
      maskingResult += "*".repeat(lng);
      return maskingResult;
    }

This works well. But the unique problem is that when I want to delete all password in input using Ctrl+A and Backspace, the delete works only one letter by my methods.

I don't know how can I catch Ctrl+A or select some range situation by mouse to delete password.

Could you give me some solution for this? THank you so much for reading it.

Upvotes: 0

Views: 442

Answers (1)

Lana
Lana

Reputation: 1267

Your code will work only if you add to the end or delete from the end of the string. Here the method working even if you delete/insert text from/in the middle of the string. It uses selectionStart property to determine where changes occurred.

It also works fine with Delete key. To do it I compare the length of form.hiddenPassword and form.password instead of checking event type.

I use replace standard method for masking. So, no need to create your own method.

...
  data: {
    form: {
      hiddenPassword: '',
      password: ''
    }
  },
  methods: {
    test: function (e) {
      let caretPosition = e.target.selectionStart
      let restPartLength = this.form.password.length - e.target.selectionStart
      if (this.form.hiddenPassword.length > this.form.password.length) {
        this.form.hiddenPassword = this.form.hiddenPassword.substr(0, caretPosition) +                   
        this.form.hiddenPassword.substring(
          this.form.hiddenPassword.length-restPartLength, 
          this.form.hiddenPassword.length
        );
      } else {
        let inserted = this.form.password.replace(/\*/g,'');
        this.form.hiddenPassword =
          this.form.hiddenPassword.substr(
            0,
            this.form.hiddenPassword.length - restPartLength) +
          inserted + 
          this.form.hiddenPassword.substring(this.form.hiddenPassword.length-restPartLength, this.form.hiddenPassword.length);
      }
      this.form.password = this.form.password.replace(/./g,'*');
    }
  }
...


new Vue({ 
	el: "#test",
	data: {
		form: {
        hiddenPassword: '',
        password: ''
      }
	},
	methods: {
		test: function (e) {
			let caretPosition = e.target.selectionStart
			let restPartLength = this.form.password.length - e.target.selectionStart
			if (this.form.hiddenPassword.length > this.form.password.length) {
        this.form.hiddenPassword = this.form.hiddenPassword.substr(0, caretPosition) + 
					this.form.hiddenPassword.substring(this.form.hiddenPassword.length-restPartLength, this.form.hiddenPassword.length);
      } else {
				let inserted = this.form.password.replace(/\*/g,'');
        this.form.hiddenPassword =
          this.form.hiddenPassword.substr(0, this.form.hiddenPassword.length - restPartLength) +
          inserted + 
					this.form.hiddenPassword.substring(this.form.hiddenPassword.length-restPartLength, this.form.hiddenPassword.length);
      }
			this.form.password = this.form.password.replace(/./g,'*');
		}
	}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="test">
		<input type="text" v-model="form.password" @input="test" />
{{ form.hiddenPassword }}
</div>

Upvotes: 1

Related Questions