超级个体@产品程序员

微信小程序6位支付密码输入框

2018-02-08  本文已影响117人  浅吟轻唱

微信小程序6位支付密码输入框

产品需求

微信小程序支付密码6位输入框

实现效果

非明文6位输入框,模拟光标,输入自动移到下一位,满6位自动设置

实现原理

1.放置一个输入框,隐藏其文字和位置,同时设置支付输入框(表格)样式

2.当点击输入框时设置表格为聚焦状态,唤起键盘,点击空白处,失去焦点,设为失去焦点样式

3.限制输入框最大字数为6并且监听输入框状态,以输入框值的长度作为圆点和光标展示的渲染条件

4.当输入框的值等于6时,设置组件的事件传递到引用的页面,页面自定义事件(发起支付请求等...)

其他说明

6位支付密码是一个很常见的需求。

在H5端用vue做过组件,app端也要求实现,小程序类似的组件在网页上检索到的并不多,仅此记录。

Github地址:https://github.com/evan2020/six-Input-box

上一篇下一篇

猜你喜欢

热点阅读