实现输入六位密码弹框

最新推荐文章于 2025-03-16 21:47:41 发布

Hong Jet

最新推荐文章于 2025-03-16 21:47:41 发布

阅读量1.1k

点赞数

分类专栏： vue开发

本文链接：https://blog.youkuaiyun.com/smlljet/article/details/103614740

版权

vue开发专栏收录该内容

27 篇文章

订阅专栏

本文介绍如何实现一个输入六位密码的弹框，通过隐藏input框并使用六个li元素来模拟显示，利用焦点管理和输入事件监听数字输入，用正则表达式过滤非数字字符。

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

在这里插入图片描述
思路：将input框隐藏，用六个li格子当框，焦点聚焦在input上，通过监听input框输入的长度，根据输入长度判断控制格子内小黑点是否显示，同时用正则替换非数字。

<div id="payPwd">
		    <div style="text-align: center">支付密码</div>
		    <input ref="pwd" type="password" maxlength="6" v-model="msgPass"/>
		    <ul class="pwd-wrap jg" @click="inputFocus">
		      <li v-for="item in [0,1,2,3,4,5]"><i v-if="msgLength > item"></i>{{item}}</li>
		    </ul>
		</div>

export default {
		components: {
		},
		data() {
			return {
  				msgPass:'',
       			msgLength:0,
			};
		},
		watch:{
		      msgPass(val){
		        if(/[^\d]/g.test(val)){//非数字就为空
		          this.msgPass = this.msgPass.replace(/[^\d]/g,'');
		        }else{
		            this.msgLength = val.length;
		        }
		      },
		    },

		mounted() {

		},
		methods: {
			inputFocus(){
         		 this.$refs.pwd.focus();
      		},

		}

html,body{
    width: 100%;
    height: 100%;
    background: #fbf9fe;
  }
  input{
  	position: absolute;
  	z-index: -10;
  	left:-100%;
  	opacity: 0
  }
  #payPwd .pwd-wrap{
    width: 90%;
    height: 44px;
    padding-bottom: 1px;
    margin: 0 auto;
    background: #fff;
    border:1px solid #ddd;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    cursor: pointer;
  }
  .pwd-wrap li{
    list-style-type:none;
    text-align: center;
    line-height: 44px;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-flex: 1;
    border-right:1px solid #ddd ;
  }
  .pwd-wrap li:last-child{
    border-right: 0;
  }
  .pwd-wrap li i{
    height: 10px;
    width: 10px;
    border-radius:50% ;
    background: #000;
    display: inline-block;
  }