微信小程序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 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
关于layui flow loading占位图的实现方法
Sep 21 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 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/12/14 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
jquery模拟按下回车实现代码
2011/09/20 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
深入了解JavaScript代码覆盖
2019/06/13 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
Python中获取网页状态码的两个方法
2014/11/03 Python
Python Sleep休眠函数使用简单实例
2015/02/02 Python
Python中字符串对齐方法介绍
2015/05/21 Python
python字典操作实例详解
2017/11/16 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
Python如何访问字符串中的值
2020/02/09 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
python中remove函数的踩坑记录
2021/01/04 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
大学生工作推荐信范文
2013/12/02 职场文书
销售求职信范文
2014/05/26 职场文书
爱心募捐感谢信
2015/01/22 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书