input密码框输入后设置显示为星号或其他样式

最新推荐文章于 2025-07-03 11:10:54 发布

weixin_30772105

最新推荐文章于 2025-07-03 11:10:54 发布

阅读量7.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python java ViewUI

原文链接：http://www.cnblogs.com/zuobaiquan01/p/10024435.html

这篇博客展示了如何在Vue中创建一个input密码框，输入后内容以星号显示。作者提供了核心代码示例，并分享了源码及预览地址，方便读者实践和学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

预览效果

核心代码

<div class="text-input" :class="right?'textinput-right':''">
    <span :style="right?{paddingRight:'5px'}:{paddingLeft:'5px'}" v-if="star">{{"*".repeat(text.length)}}</span>
    <input
    :type="type=='number'?'tel':'text'"
    ref="inputText"
    :style="[star?'':{paddingLeft:'5px'},right?{textAlign:'right'}:'']"
    :class="['text',className]"
    v-model="value"
    @keyup="handelKeyup"
    :placeholder="text?'':placeholder"
    :maxlength="maxlength" />
  </div>

watch: {
    value(val) {
      if(this.star && val){
        if(/.*[\u4e00-\u9fa5]+.*$/.test(val)){
          this.value = val.replace(/[\u4e00-\u9fa5]/gm,'')
          return ;
        }
        this.text += val
        if(this.star){
          this.value = ''
        }
      }
    }
  },
  methods: {
    handelKeyup(e){
      if(e.keyCode==8){
        this.text=this.text.slice(0,this.text.length-1)
      }
      this.$emit("input",this.star? this.text : this.value)
    }
  }

源码地址：https://github.com/zuobaiquan/vue/tree/master/vueExercise/vue-component/src/components/myinput

预览地址: http://zuobaiquan.com/vue/vueExercise/vue-component/dist/index.html#/input

转载于:https://www.cnblogs.com/zuobaiquan01/p/10024435.html