How to hide part of input value in v-text-field?-CodePudding

The Problem-

The purpose of this v-text-field is, to allow users manually type in and change their name on the website. But for security, I hope to hide all the parts of the input value except the last char of the username.
Since the Vuetify text field is two-way binding, it's cumbersome to set up. I didn't find the proper npm extension to serve this request as well.

My Code-

<template>
    <ValidationProvider>
         <v-text-field
            hide-details="auto"
            v-model="YourName"
            label="username"
            placeholder="type your name" />
    </ValidationProvider>
</template>

<script>
    export default {
         data() {
            return {
              YourName: ''
            }
         }
    }
</script>

Expectation

(1) User type name as "Allen Walker" in the text field.
(2) v-model receives the user name "Allen Walker" to Database. If he buys products from the website, the username will automatically be put as "Allen Walker" in the step of Checkout.
(3) What I want to achieve-
In the User-Profile, the username will be displayed and the user can edit it but before clicking on the text field, the displayed name should look like "**********r".

CodePudding user response：

There could be more methods to do this but that relies on your UX as well like how you want to show the hidden characters and when to show the full name, etc.

I can think about the subsequent technique-

On the user profile page's mounted hook, replace the desired characters with the special symbol (*), and make your text field read-only, so it won't update.
When focusing on the text field, show the full name inside it and make it editable.
When focusing out from the text field, save the updated name to your DB, replace the desired characters with the special symbol (*), and make the text field read-only again.

Here is the functioning demo-

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app">
      <v-app>
        <v-text-field
          label="username"
          :readonly="readonly"
          v-model="updatedName"
          @focus="onFocus"
          @blur="onBlur"
          ></v-text-field>
      </v-app>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
    <script>
      new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        
        data() {
          return {
            readonly: true, // initial state
            username: "nehasoni", // this should come from API
            updatedName: null, // for v-model use
          }
        },
        
        mounted() {
          this.hideName()
        },
        
        methods: {
          hideName() {
            // replace all characters except first with a *
            this.updatedName = this.username.replace(/.(?=.{1,}$)/g, '*');
          },
          
          onFocus() {
            // make text field editable 
            this.readonly = false;
            // show full name
            this.updatedName = this.username;
          },
          
          onBlur() {
            /** 
            * save your name to database and assign response to the username, like this-
            * this.username = api_response
            * For now, I am using updatedName as API response
            */
            this.username = this.updatedName;
            // make text field read only again
            this.readonly = true;
            // Hide the name again.
            this.hideName();
          }
        }
      })
    </script>
  </body>
</html>