Estoy creando como una plantilla que acepta la entrada del usuario y la oculta con * . Solo necesito insertar guiones en el medio como un número SSN. Ya casi termino, solo que los lugares no son adecuados.
<!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>Hice referencia a Insertar guiones en javascript y puse un guión después de cada carácter n durante la entrada desde el teclado, pero no tengo claro cómo puedo implementarlos en mi caso.
Cuando el usuario ingresa 123456789, quiero como ***-**-**** . (Por favor, no recomiende usar el tipo de contraseña de entrada o cambiar la familia de fuentes)
Si te entiendo correctamente, prueba con el siguiente fragmento:
<!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>Vi uno de los enlaces que puso en su pregunta, hay una función de format que puede usar:
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, "*"); });