如何在微信小程序内开发验证码密码输入框功能（微信小程序需要手机验证码）

如何在微信小程序内开发验证码密码输入框功能（微信小程序需要手机验证码）

这次给大家带来如何在微信小程序内开发

验证码

密码输入框功能，在微信小程序内开发验证码密码输入框功能的

注意事项

有哪些，下面就是实战案例，一起来看一下。

在做小程序过程中做一个6位验证码输入框，本以为很简单，但是在写的时候遇到各种各样的阻力，在网上查阅资料也寥寥无几，后来经过一番思考，终于敲定下来本人最满意的方案，特意发出来让大家参考一下，希望能帮到大家！

一、效果图如下：

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

二、代码部分

wxml：

Submit-

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(){ var that = this; that.setData({ isFocus:true, }) }, formSubmit(e){ console.log(e.detail.value.password); }, })-

wxss:

content{ display: flex; justify-content: space-around; align-items: center; margin-top: 200rpx; } iptbox{ width: 80rpx; height: 80rpx; border:1rpx solid #ddd; border-radius: 20rpx; display: flex; justify-content: center; align-items: center; text-align: center; } ipt{ width: 0; height: 0; } btn-area{ width: 80%; background-color: orange; color:white; }-

三、思路：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。