微信小程序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 相关文章推荐
jquery ready函数源代码研究
Dec 06 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
解决vue无法设置滚动位置的问题
Oct 07 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 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分页代码实例
2013/10/24 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
javascript 对象的定义方法
2007/01/10 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
Python函数学习笔记
2008/10/07 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
利用Python优雅的登录校园网
2020/10/21 Python
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
实现向右循环移位
2014/07/31 面试题
优秀的计算机专业求职信范文
2013/12/27 职场文书
廉洁教育学习材料
2014/05/19 职场文书
社区科普工作方案
2014/06/03 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
委托书的写法
2014/08/30 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
员工辞职信怎么写
2015/02/27 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS