微信小程序6位支付密码输入框
产品需求
微信小程序支付密码6位输入框
实现效果
非明文6位输入框，模拟光标，输入自动移到下一位，满6位自动设置
实现原理
1.放置一个输入框，隐藏其文字和位置，同时设置支付输入框（表格）样式
2.当点击输入框时设置表格为聚焦状态，唤起键盘，点击空白处，失去焦点，设为失去焦点样式
3.限制输入框最大字数为6并且监听输入框状态，以输入框值的长度作为圆点和光标展示的渲染条件
4.当输入框的值等于6时，设置组件的事件传递到引用的页面，页面自定义事件（发起支付请求等...）
其他说明
6位支付密码是一个很常见的需求。
在H5端用vue做过组件，app端也要求实现，小程序类似的组件在网页上检索到的并不多，仅此记录。
小程序支付指南： 微信小程序与php 实现微信支付 | 链接 微信小程序---设计支付密码的输入框| 链接 e玩转...
微信小程序6位支付密码输入框 产品需求 微信小程序支付密码6位输入框 实现效果 非明文6位输入框，模拟光标，输入自...
6月16日更新 微信小程序--绘图canvas微信小程序--如何实现动画效果微信小程序---设计支付密码的输入框微...
SYBoxTextField小方块输入框（类似于微信支付密码的方块输入框）。 代码示例
随着微信支付宝在支付领域的大火之后，支付宝、微信的处理方式几乎成为了业界标准。很多公司采用微信、支付宝的密码输入框...
申请微信支付小程序认证后进入微信支付申请小程序的微信支付实战：微信小程序支付开发具体流程 填写企业信息对公账户并上...
1、微信小程序开发常见之坑2、微信小程序联盟-微信小程序开发社区-小程序3、怎么在弹窗中加入输入框4、微信小程序实...
前言 最近项目中有支付功能，用户输入密码时要类似微信支付密码输入框的样式，本想直接copy网上的，但设计姐姐总是对...
该文章纪录了我在开发小程序支付过程中的具体流程 1. 申请微信支付 小程序认证后进入微信支付申请小程序的微信支付 ...
支付宝小程序与微信小程序复制功能对比： 1.微信小程序之复制功能 2.支付宝小程序之复制功能
本文标题：微信小程序6位支付密码输入框
本文链接：https://www.haomeiwen.com/subject/dpsxtftx.html
网友评论
* 当组件输入数字6位数时的自定义函数
*/
valueSix(val) {
// console.log(input_value);
// 模态交互效果
wx.showToast({
title: '支付成功',
icon: 'success',
duration: 2000
})
console.log(val);
},
传入参数 你打印出来就知道怎么取了