How to get the value entered in the input after replacing it with asterisk (*)?-CodePudding

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

CodePudding user response：

Is there any reason not to just have three password input fields?

input {
    width: 40px;
}

<!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="password"
          class="form-control"
          name="sector"
          id="sector"
          :value="someDataComponents[0]"
          required
          @input="(e) => onInput(e, 0)"
          :maxlength=3
        /> -
        <input
          type="password"
          class="form-control"
          name="sector"
          id="sector"
          :value="someDataComponents[1]"
          required
          :maxlength=2
          @input="(e) => onInput(e, 1)"
        /> -
        <input
          type="password"
          class="form-control"
          name="sector"
          id="sector"
          :value="someDataComponents[2]"
          required
          :maxlength=4
          @input="(e) => onInput(e, 2)"
        />
        {{ someData }}
      </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: "",
            someDataComponents: ["", "", ""],
          };
        },
        methods: {
          onInput(element, idx) {
            this.someDataComponents[idx] = element.target.value;
            this.someData = this.someDataComponents.join('')
            if (element.target.value.length === element.target.maxLength && element.target.nextElementSibling) { element.target.nextElementSibling.focus() }
            else if (element.target.value.length === 0 && element.target.previousElementSibling) { element.target.previousElementSibling.focus() }
          },
        },
      });
    </script>
  </body>
</html>

Or, an alternative would be to use something like https://fontstruct.com/ to create a font where all characters are asterisks (except the dash), like:

      const app = new Vue({
        el: "#app",
        data() {
          return {
            someData: "",
            someDataComponents: ["", "", ""],
          };
        },
        methods: {
          onInput(element, idx) {
            this.someDataComponents[idx] = element.target.value;
            this.someData = this.someDataComponents.join('')
            if (element.target.value.length === element.target.maxLength && element.target.nextElementSibling) { element.target.nextElementSibling.focus() }
            else if (element.target.value.length === 0 && element.target.previousElementSibling) { element.target.previousElementSibling.focus() }
          },
        },
      });

@font-face { 
  font-family: "All Asterisks";
  src: url(data:application/octet-stream;base64,d09GMgABAAAAAAUwAA0AAAAASkgAAATWAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCUhEICvs84HALgU4AATYCJAOBcAQgBY0KB4FuG0U7I5JMzpdB/iqBJ3PV6A7ABoE6EML0pzgmKsJgF/QZHTEoDmE52Xt7mPfi4fn9/f PuffaF2J6EBOECCA73fqi05crM3jyl9JhDLgIhoFmenTbI938ohyXEhKtsP7Bue0hvXQSkXq16UUhJNoktq0iMVx6SNGT3NVc7rx8V4JvV5gLtexYAQm1SQ423NvLkxC6qvU/7vfxnw9Uwef3FliRr8B9v4K2QoOiWit8OaKoQmRpebW1bMmaqn1xSReI9zGczmVjFH/jYpEI Grz2G/w7bUZk4HhTxaoQwcyIXdUSMiQVZXigUJKEkgSEsdiDBLgJgEAqzdjCJYaGkotUAUEVJYrDYYEcuToE2CNXKBPMhVVqmS4PtRdpKaMoaGgSEy5XPoh/SEWAEQFAYgMGQAgyFNRUfkcaHg2NLwv gcMIkwo40KqUld103b9ME7zsm77cV738zqu5wdhFCdplhdlVTcQYUJZ2/XDOM3LuoHJ144cfb5AWJTLbmcfO/s Jb9Ia5nO/wFNoADV7bcYqpkoT nJpbbNN1epjUVekfzWxxJKcSEbE exBLNqtXLW5bIaOYnEuljUREOUnKI2/arQoCap lFRRCusu3U0AEgG2Tc0Xf9vTyy9PbI0v1PHUnluz11G8Kg/35k8 iVBO78E4qmnzbRBlUMnQRLpp5 OyfyuVcmGY993Exa13tsOIxt28VSPa67 0KWVwJTM3Sit3vy0uh6F7rdnCQC8bJM16p23 Il4v73w76raKtQmCVClanRk6hhIiKrSmulzT7KWyhrtOHtKVakOKbbauhj5rgSOmakaZJjWQBwXwvrM30OodwaZSg Rq/cakna/opBHPSrUxyRUmhCPUaUjfka1 mwINcZnd1FreT4LdZbk/6HecLo6d6tx6Q 5SNWYC0PosR2ZBreQ6zGGZLxPUKiIAhV6ohmVtsUCVJkYH6BaT5ZQY0s2GbXuZq9Q53p EfWWp7mrb7UpNQ56gxWPWU6ASmSOOaeyOJpGjXUEyiQyKaC9Ysjx0lQLbmruJMJCjwB3Gg2MEYE2YCZRE3D3Bu8kaGrFuQG aNaoQTw47HwR6VFguWWi/rnVOtG0cVKRBKRL9KuIMtmzmu zXif4FnijQoCYhRCExyclrTW/5zXUM1Bt2kih14K4vq3fBx2KF5AFKdo8ihI3hzDR7C0GwAmCgbgVixm9fZRcVypI1IQlRJuChnhpCN0GAqaasTNAC0Sg3KiTNUDbwgLn8NZT/sIl4L 4Woscjq66aVUQcStDRxYx4fQWYrSmMvOFTCZGWOA9NUhJfTInwMTbdrktJ5aYtjfrRZbF1DSKHFntKnVKXT1fqKZu3LimdQXjkC2sI/x6nxGFsuliUSrGhYKhv/UNblXPK8fdamlegZEGesEKWkdoVG/x1ncqVgA9QfdmAJ6xOQ3lmIV jEjhFoItZk0bOCueQJUe98JaK6xkL6O1EsRtFZ6zvRZIJrqB83GtB7fyglXfBGxXuKAl5roEmAAAAL MyWFIzw006MGqPBNvt1p16jVo1GTDpi3bduzas /AoSPHZk6cQheEYATFcIKklLRKrdHq9AajyWyx2uwOp8vt8XK49ZbgC4QisUQqkyuUKrUGhGAExbQ6vcFoMlusNj9/H18AAAA=);
}

input {
    font-family:'All Asterisks';
}

<div id="app">
  <div>
    Input :
    <input
      class="form-control"
      name="sector"
      id="sector"
      :value="someDataComponents[0]"
      required
      @input="(e) => onInput(e, 0)"
    />
    {{ someData }}
  </div>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>

CodePudding user response：

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..