美文网首页超级个体@产品程序员
微信小程序6位支付密码输入框

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

作者: 浅吟轻唱 | 来源:发表于2018-02-08 22:11 被阅读117次

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

    产品需求

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

    实现效果

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

    实现原理

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

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

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

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

    其他说明

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

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

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

    相关文章

      网友评论

      • ZainZhu:请问这个控件怎么获取输入的值呢?
        西巴撸:/**
        * 当组件输入数字6位数时的自定义函数
        */
        valueSix(val) {
        // console.log(input_value);
        // 模态交互效果
        wx.showToast({
        title: '支付成功',
        icon: 'success',
        duration: 2000
        })
        console.log(val);
        },
        传入参数 你打印出来就知道怎么取了

      本文标题:微信小程序6位支付密码输入框

      本文链接:https://www.haomeiwen.com/subject/dpsxtftx.html