微信小程序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获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
微信小程序仿通讯录功能
Apr 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结合ACCESS的跨库查询功能
2015/06/12 PHP
php开发工具有哪五款
2015/11/09 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
python实现简单socket通信的方法
2016/04/19 Python
Python中文件的读取和写入操作
2018/04/27 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
解释一下抽象方法和抽象类
2016/08/27 面试题
MYSQL支持事务吗
2013/08/09 面试题
施工人员岗位职责
2013/12/12 职场文书
安卓程序员求职信
2014/02/28 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
靠谱的活动总结
2019/04/16 职场文书
导游词之青城山景区
2019/09/27 职场文书