Solo estoy creando una aplicación Vue que mostrará * en lugar de lo que el usuario está ingresando al ingresar los datos (como una contraseña). Puedo lograr eso, pero no puedo obtener el valor real que está ingresando el usuario. Por ejemplo, si el usuario está ingresando, 123-45-6789, debería poder obtener ese valor, pero en la interfaz de usuario quiere mostrarse como *** - ** - **** (en el cuadro de entrada)
<!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>Quiero mostrar ***- **- **** cuando el usuario ingresa 123456789 No quiero usar contraseña. Por favor, no sugiera / responda para usar la contraseña
Intenté esto además de la respuesta de @dave.
<!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>Una solución muy simple es usar HTML simple.
<input type="password" id="pwd" name="pwd" minlength="8"> El tipo de password ocultará los caracteres mientras aún sean accesibles.
editar:
En los casos en los que se pretende que la entrada sea en números separados (tarjetas de crédito por ejemplo), se suelen utilizar diferentes casillas de entrada (en este caso serían de tipo contraseña), validadas para saltar a la siguiente cuando se alcance el número máximo.
¡Espero eso ayude!
Puede obtener el valor ingresado con @keyup y guardarlo en una variable antes de reemplazarlo.
<input id="field1" type="text" @keyup="keymonitor" v-model="ThisIsField1">y luego use el método keymonitor para obtener el valor que se ingresa en el cuadro de entrada.
keymonitor: function(event) { console.log(event.key); }El problema con esto es que las personas pueden ingresar números en otras posiciones y no lo sabrás de una manera simple.