微信小程序6位或多位验证码密码输入框功能的实现代码
87 浏览量
2020-08-27
10:34:35
上传
评论 1
收藏 65KB PDF 举报
微信小程序微信小程序6位或多位验证码密码输入框功能的实现代码位或多位验证码密码输入框功能的实现代码
主要介绍了微信小程序6位或多位验证码密码输入框功能的实现代码,实现思路很简单，需要的朋友可以参考下
在做小程序过程中做一个6位验证码输入框，本以为很简单，但是在写的时候遇到各种各样的阻力，在网上查阅资料也寥寥无
几，后来经过一番思考，终于敲定下来本人最满意的方案，特意发出来让大家参考一下，希望能帮到大家！
一、效果图如下：一、效果图如下：
二、代码部分二、代码部分
wxml：
<form bindsubmit="formSubmit">
<view class='content'>
<block wx:for="{{Length}}" wx:key="item">
<input class='iptbox' value="{{Value.length>=index+1?Value[index]:''}}" disabled password='{{ispassword}}' catchtap='Tap'></input>
</block>
</view>
<input name="password" password="{{true}}" class='ipt' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="Focus"></input>
<view>
<button class="btn-area" formType="submit">Submit</button>
</view>
</form>
js:
Page({
/**
* 页面的初始数据
*/
data: {
Length:6, //输入框个数
isFocus:true, //聚焦
Value:"", //输入的内容
ispassword:true, //是否密文显示 true为密文， false为明文。
},
Focus(e){
var that = this;
console.log(e.detail.value);
var inputValue = e.detail.value;
that.setData({
Value:inputValue,
})
},
Tap(){
资源评论
