微信小程序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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
Javascript的常规数组和关联数组对比小结
May 24 Javascript
EasyUI 中 MenuButton 的使用方法
Jul 14 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
vue文件运行的方法教学
Feb 12 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
微信小程序实现拍照和相册选取图片
May 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
python中的多重继承实例讲解
2014/09/28 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
Python之re操作方法(详解)
2017/06/14 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
linux环境下Django的安装配置详解
2019/07/22 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
SQL Server笔试题
2012/01/10 面试题
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
文化建设工作方案
2014/05/12 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript