How to delete All string in input tag using Vue

Question

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.

After you check to the delete input, can't you just do an additional check to see if form.password.length === 0 and if true just clear form.hiddenPassword? — Chad Roberts
– Chad Roberts, Commented Mar 13, 2020 at 15:07

Lana · Accepted Answer · 2020-03-13 16:06:30Z

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>

Collectives™ on Stack Overflow

How to delete All string in input tag using Vue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related