微信小程序6位支付密码输入框
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序6位支付密码输入框相关的知识，希望对你有一定的参考价值。
参考技术A 微信小程序6位支付密码输入框产品需求
微信小程序支付密码6位输入框
实现效果
非明文6位输入框，模拟光标，输入自动移到下一位，满6位自动设置
实现原理
1.放置一个输入框，隐藏其文字和位置，同时设置支付输入框（表格）样式
2.当点击输入框时设置表格为聚焦状态，唤起键盘，点击空白处，失去焦点，设为失去焦点样式
3.限制输入框最大字数为6并且监听输入框状态，以输入框值的长度作为圆点和光标展示的渲染条件
4.当输入框的值等于6时，设置组件的事件传递到引用的页面，页面自定义事件（发起支付请求等...）
其他说明
6位支付密码是一个很常见的需求。
在H5端用vue做过组件，app端也要求实现，小程序类似的组件在网页上检索到的并不多，仅此记录。
Github地址： https://github.com/evan2020/six-Input-box
以上是关于微信小程序6位支付密码输入框的主要内容，如果未能解决你的问题，请参考以下文章