I am just creating a Vue app that will show * instead of what user is entering on entering the data itself (like a password). I am able to achieve that but I am not able to get the real value that user is entering. For Eg, If user is entering, 123-45-6789 I should be able to get that value but in ui it want to show like *** - ** - **** (in the input box itself)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue</title>
</head>
<body>
<div id="app">
<div>
Input :
<input
type="text"
class="form-control"
name="sector"
id="sector"
:value="maskedDataComp"
required
@input="onInput"
/>
{{ someDataComp }}
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>
<script>
const app = new Vue({
el: "#app",
data() {
return {
someData: "",
maskedData: "",
};
},
computed: {
someDataComp: {
get() {
return this.someData;
},
set(val) {
this.someData = val;
},
},
maskedDataComp() {
this.maskedData = this.someDataComp.replace(/\d/g, "*");
console.log(this.maskedData);
return this.maskedData;
},
},
methods: {
onInput(element) {
this.someDataComp = element.target.value;
},
},
});
</script>
</body>
</html>I want to show ***- **- **** when user enters 123456789 I don't want to use password. Please don't suggest/answer to use password
I tried this on top of @dave 's Answer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue</title>
</head>
<body>
<div id="app">
<input type="text" @input="onInput" v-model="someData" />
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>
<script>
Vue.filter("uppercase", function (value) {
return value.replace(/\d/g, "*");
});
const app = new Vue({
el: "#app",
data() {
return {
someData: "",
maskedData: "",
};
},
computed: {
getMaskedData() {
return this.maskedData;
},
},
methods: {
onInput(e) {
let maskString = e.data
if(!!maskString)
this.maskedData += maskString;
console.log('mask', this.getMaskedData)
this.someData = this.$options.filters.uppercase(e.target.value);
},
},
});
</script>
</body>
</html>A very simple solution is using simple HTML.
<input type="password" id="pwd" name="pwd" minlength="8">
The type password will hide the characters while are still accesible.
edit:
In cases where the input is meant to be in separated numbers (credit cards for example), they usually use different input boxes (in this case they would be password type), validated to jump to the next one when the maximum number is reached.
Hope it helps!
You could get the entered value with @keyup, and save it on a variable before doing the replacing..
<input id="field1" type="text" @keyup="keymonitor" v-model="ThisIsField1">
and the use the method keymonitor to get the value that is being entered at the input box.
keymonitor: function(event) {
console.log(event.key);
}
The problem with this is that people may enter numbers on other positions and you will not know that in a simple way..