微信小程序6位或多位验证码密码输入框功能的实现代码


Posted in Javascript onMay 29, 2018

在做小程序过程中做一个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(){ 
  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; 
}

三、思路:

1、放置一个输入框,隐藏其文字和位置,同时设置支付输入框(表格)样式
2、当点击输入框时设置输入框为聚焦状态,唤起键盘,点击空白处,失去焦点,设为失去焦点样式,因为输入框宽高为0,所以不会显示输入框和光标,实现隐藏。
3、限制输入框最大字数并且监听输入框状态,以输入框值的长度作为输入框(表格)内容的渲染条件
4、点击提交按钮时,获取输入框内容。

总结

以上所述是小编给大家介绍的微信小程序6位或多位验证码密码输入框功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
Vue 全局loading组件实例详解
May 29 #Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 #Javascript
详解vue-cli项目中怎么使用mock数据
May 29 #Javascript
js统计页面上每个标签的数量实例代码
May 29 #Javascript
浅谈React的最大亮点之虚拟DOM
May 29 #Javascript
深入理解Vue Computed计算属性原理
May 29 #Javascript
javascript、php关键字搜索函数的使用方法
May 29 #Javascript
You might like
用PHP调用数据库的存贮过程
2006/10/09 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
javascript 数组操作详解
2015/01/29 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
python openpyxl使用方法详解
2019/07/18 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
Django用户身份验证完成示例代码
2020/04/03 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
高中班长自我鉴定
2013/12/20 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python