I am creating like a template which accepts user input and hide it with *. I just need to insert hyphens in between like a SSN number. I am almost done just the places are not proper.
<!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" maxlength="11" />
</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) {
const ssnValue = value.substr(0,3) + '-' + value.substr(3, 6) + '-' + value.substr(6);
console.log('fil',ssnValue)
return ssnValue.replace(/\d/g, '*')
});
const app = new Vue({
el: "#app",
data() {
return {
someData: "",
maskedData: "",
};
},
computed: {
getMaskedData() {
return this.maskedData;
},
},
methods: {
onInput(e) {
let originalString = e.data
if(!!originalString)
this.maskedData += originalString;
console.log('mask', this.getMaskedData)
this.someData = this.$options.filters.uppercase(e.target.value);
},
},
});
</script>
</body>
</html>I referred Insert hyphens in javascript and put dash after every n character during input from keyboard but i am unclear how can i implement those in my case.
When user is entering 123456789, I want like ***-**-****. (Please don't recommend using input type password or changing font family)
If I understand you correctly try following snippet:
<!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" maxlength="11" />
</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) {
let ssnValue =value
if(value.length === 3 || value.length === 6) {
ssnValue = value + '-'
}
console.log('fil',ssnValue)
return ssnValue.replace(/\d/g, '*')
});
const app = new Vue({
el: "#app",
data() {
return {
someData: "",
maskedData: "",
};
},
computed: {
getMaskedData() {
return this.maskedData;
},
},
methods: {
onInput(e) {
let originalString = e.data
if(!!originalString)
this.maskedData += originalString;
console.log('mask', e.data)
if(e.data) this.someData = this.$options.filters.uppercase(e.target.value);
},
},
});
</script>
</body>
</html>I saw one of the links that you put in your question there is a format function which you can use:
function format(input, format, sep) {
input = input.replaceAll("-", "");
var output = "";
var idx = 0;
for (var i = 0; i < format.length && idx < input.length; i++) {
output += input.substr(idx, format[i]);
if (idx + format[i] < input.length) output += sep;
idx += format[i];
}
output += input.substr(idx);
return output;
}
Vue.filter("uppercase", function (value) {
let ssnValue = format(value, [3, 3, value.length - 6], "-");
console.log("fil", ssnValue);
return ssnValue.replace(/\d/g, "*");
});