vue.js 如何隐藏部分输入值在v文本字段？

yb3bgrhw 于 2023-01-14 发布在 Vue.js

关注(0)|答案(1)|浏览(202)

问题是

这个v-text-field的目的是，允许用户手动输入和修改他们在网站上的名字。但是为了安全起见，我希望隐藏输入值的所有部分，除了用户名的最后一个字符。
由于Vuetify文本字段是双向绑定的，所以设置起来很麻烦，我也没有找到合适的npm扩展来满足这个请求。

我的代码-

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

期望

(1)用户在文本字段中键入名称“艾伦步行者”。
(2)v-model接收用户名“艾伦步行者”到数据库，如果他从网站购买产品，则在结账步骤中，用户名将自动被置为“Allen Walker”。
(3)我想要实现的
在用户配置文件中，将显示用户名，用户可以对其进行编辑，但在点击文本字段之前，显示的名称应类似于“**********r”。

vue.js

来源：https://stackoverflow.com/questions/75091369/how-to-hide-part-of-input-value-in-v-text-field

1条答案

按热度按时间

pgvzfuti1#

可以有更多的方法来做到这一点，但这取决于你的用户体验，以及像你想如何显示隐藏的字符和何时显示全名等。
我可以想想接下来的技巧-
1.在用户配置文件页面的挂载钩子上，用特殊符号（）替换所需的字符，并将文本字段设置为只读，这样它就不会更新。
1.当聚焦文本字段时，显示其中的全名并使其可编辑。
1.当焦点从文本字段移出时，将更新后的名称保存到DB中，用特殊符号（）替换所需的字符，并再次将文本字段设为只读。
这是功能演示-

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/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/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/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>

赞(0）回复(0）举报 2023-01-14

我来回答

vue.js 如何隐藏部分输入值在v文本字段？

1条答案

相关问题

热门标签

最新问答