微信小程序6位或多位验证码密码输入框功能的实现代码_微信小程序view布局怎样写数字键盘 - CSDN文库

微信小程序密码输入框

微信小程序输入框

107 浏览量更新于2023-03-16 评论 1 收藏 65KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

微信小程序微信小程序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(){

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38715048

粉丝: 7
资源: 960

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈