What is the method for retrieving the input value once it has been obscured with asterisks (*)?

Question

What is the method for retrieving the input value once it has been obscured with asterisks (*)?

Currently, I am in the process of developing a Vue application that will display * characters instead of revealing the actual input entered by the user (similar to a password field). While I have successfully implemented this functionality, I am encountering an issue with retrieving the exact value entered by the user. For example, if the user enters 123-45-6789, I should be able to access that precise value while displaying it as *** - ** - **** within the input box.

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

In essence, my goal is to visually represent the input as ***- **- **** when the user types 123456789 without resorting to using a password field. Kindly refrain from suggesting or providing a solution involving password implementation.

javascript vue.js

Answer 1

Answer №1

I decided to implement this addition after reviewing @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>

Answer 2

I decided to implement this addition after reviewing @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>

Answer 3

Answer №2

A straightforward approach involves utilizing basic HTML.

<input type="password" id="pwd" name="pwd" minlength="8">

The use of the password type will conceal the characters while still allowing access.

update:

In situations where the input should consist of separate numbers (such as credit cards), individual input boxes are often used (in this case, they would be password type) and validated to switch to the next box once the maximum number is reached.

I hope this explanation proves helpful!

You can capture the entered value using @keyup, and store it in a variable before making any replacements.

<input id="field1" type="text" @keyup="keymonitor" v-model="ThisIsField1">

then utilize the keymonitor method to retrieve the value being inputted into the field.

keymonitor: function(event) {
        console.log(event.key);
    }

One drawback of this method is that individuals may enter numbers at different positions, making it challenging to track easily.

Answer 4

A straightforward approach involves utilizing basic HTML.

<input type="password" id="pwd" name="pwd" minlength="8">

The use of the password type will conceal the characters while still allowing access.

update:

In situations where the input should consist of separate numbers (such as credit cards), individual input boxes are often used (in this case, they would be password type) and validated to switch to the next box once the maximum number is reached.

I hope this explanation proves helpful!

You can capture the entered value using @keyup, and store it in a variable before making any replacements.

<input id="field1" type="text" @keyup="keymonitor" v-model="ThisIsField1">

then utilize the keymonitor method to retrieve the value being inputted into the field.

keymonitor: function(event) {
        console.log(event.key);
    }

One drawback of this method is that individuals may enter numbers at different positions, making it challenging to track easily.

What is the method for retrieving the input value once it has been obscured with asterisks (*)?

Answer №1

Answer №2

Similar questions

Prevent ng-click from functioning in AngularJS when a specific variable is met

Having Ionic call the submit method within another method seems to be causing some issues

Injecting resolve values from UI router into Angular Jasmine tests

Ways to showcase multiple elements using introjs

Only the initial TinyMCE editor that was added dynamically is visible, the rest are not showing

In Next.js, encountering an error when using canvas drawImage

When I try to open my modal in Electron by clicking on the button, it doesn't work

Is it possible to generate a coordinate grid comprised of clickable div elements with HTML, CSS, and Javascript - with the option to utilize JQuery if necessary?

Windowing box inside a container box

A guide to testing window.pageYoffset in webdriverIO using chai assertions

issue occurring after inserting a new parameter

Having trouble initiating npm?

Scrolling through UL elements using Jquery

Fetch the count of files in a directory using AJAX

Is there a method to indicate type narrowing to TypeScript following an initial null/undefined validation?

Error: Unable to execute function abc, it is not defined as a function in this context

Is the params object sorted by $http in AngularJS?

Difficulties with angular ui-router authentication problems

How to activate Yii2 confirmation popup

I am puzzled as to why my code in React is rendering twice without any apparent reason