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

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

产品需求

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


实现效果

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


实现原理

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

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

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

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

其他说明

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载链接 注:本文转载知乎上的回答 作者:初雪 链接:https://www.zhihu.com/question...
    pengshuangta阅读 28,940评论 9 295
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,079评论 25 709
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 11,712评论 0 17
  • 圣诞节这天呢,我出门坐公交车。我后面坐着一个很瘦很瘦的黑人老爷子。大概是看我手冻红了,所以他给了我一副手套。嗯,就...
    金刚女王阅读 2,744评论 0 4
  • 听薛之谦的歌《黄色枫叶》,就好象曾经听朴树的那首《白桦林》,那歌词字里行间溢着难以名状的忧伤和悲壮,冥冥之中让人有...
    衣诺双鱼阅读 1,690评论 0 2