JavaScript仿支付宝密码输入框


Posted in Javascript onDecember 29, 2015

现在很多时候大家付款的场景都是在手机上面,而随着H5页面的开发变得越来越方便,很多场景也从客户端搬到了浏览器中,其中支付这个场景就很自然的被放在了浏览器中。那么这样的输入框大家一定不会陌生吧:

JavaScript仿支付宝密码输入框

那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签。

并且给这个5个input设置display: inline-block 属性,同时用<!- ->来消除元素直接的margin值,那么HTML就是如下的样子:

<div class="input"> 
<input type="tel" placeholder="随" maxlength=""><!- 
-><input type="tel" placeholder="机" maxlength=""><!- 
-><input type="tel" placeholder="" maxlength=""><!- 
-><input type="tel" placeholder="位" maxlength=""><!- 
-><input type="tel" placeholder="数" maxlength=""> 
</div>

在代码中我们需要设置最多输入的位数,不然就不像了嘛~当然为了在移动端输入的时候能唤起数字键盘来,我们也需要设置type="tel"。那么接下来就是CSS样式的代码了,这里我就简单的贴出一些代码,具体高仿的像不像其实就是这里了~

input { 
display: inline-block; 
&:last-child { 
border-right: px solid #; 
} 
input { 
border-top: px solid #; 
border-bottom: px solid #; 
border-left: px solid #; 
width: px; 
height: px; 
outline:none; 
font-family: inherit; 
font-size: px; 
font-weight: inherit; 
text-align: center; 
line-height: px; 
color: #ccc; 
background: rgba(,,,); 
} 
}

那么接下来就是最关键的JavaScript部分了,

/** 
* 模拟支付宝的密码输入形式 
*/ 
(function (window, document) { 
var active = , 
inputBtn = document.querySelectorAll('input'); 
for (var i = ; i < inputBtn.length; i++) { 
inputBtn[i].addEventListener('click', function () { 
inputBtn[active].focus(); 
}, false); 
inputBtn[i].addEventListener('focus', function () { 
this.addEventListener('keyup', listenKeyUp, false); 
}, false); 
inputBtn[i].addEventListener('blur', function () { 
this.removeEventListener('keyup', listenKeyUp, false); 
}, false); 
} 
/** 
* 监听键盘的敲击事件 
*/ 
function listenKeyUp() { 
var beginBtn = document.querySelector('#beginBtn'); 
if (!isNaN(this.value) && this.value.length != ) { 
if (active < ) { 
active += ; 
} 
inputBtn[active].focus(); 
} else if (this.value.length == ) { 
if (active > ) { 
active -= ; 
} 
inputBtn[active].focus(); 
} 
if (active >= ) { 
var _value = inputBtn[active].value; 
if (beginBtn.className == 'begin-no' && !isNaN(_value) && _value.length != ) { 
beginBtn.className = 'begin'; 
beginBtn.addEventListener('click', function () { 
calculate.begin(); 
}, false); 
} 
} else { 
if (beginBtn.className == 'begin') { 
beginBtn.className = 'begin-no'; 
} 
} 
} 
})(window, document);

首先我们对最外层的div进行监听,当发现用户选择div的时候就将input的焦点设置到active上面去,而这个active则是一个计数器,默认的时候是第一位的,也就是0,而当我们输入了正确的数字后将会增加一个active,这样input的焦点就会向后移动了,这样就完成了输入一个向后移动一位的功能了,而同时我们监听键盘上的退格键,当用户点击了退格键之后就对active减一,这样输入框的焦点也就向前移动了,当然,当input失去焦点的时候我们也同时移除绑定在上面的监听事件,这样就不会造成多次触发的问题了。

其实这样梳理下来会发现整个效果还是很简单的,只需要控制好一个焦点的移动就好了,而我觉得整个组件的重点还是在CSS样式的模仿上面~毕竟JavaScript的逻辑没有什么难的~最后祝大家元旦快乐啦~(*^__^*) ~~

以上代码给大家简单介绍了JavaScript仿支付宝密码输入框的全部叙述,希望大家喜欢。

Javascript 相关文章推荐
利用jq让你的div居中的好方法分享
Nov 21 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
javascript数据类型示例分享
Jan 19 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 Javascript
js实现商城星星评分的效果
Dec 29 #Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 #Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 #Javascript
JavaScrip常见的一些算法总结
Dec 28 #Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 #Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 #Javascript
Bootstrap实现响应式导航栏效果
Dec 28 #Javascript
You might like
dedecms模板标签代码官方参考
2007/03/17 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
两种php实现图片上传的方法
2016/01/22 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现高效求解素数代码实例
2015/06/30 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
Python异常处理操作实例详解
2018/08/28 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
两则小学生的自我评价分享
2013/11/14 职场文书
校园奶茶店创业计划书
2014/01/23 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
六查六看自查报告
2014/10/14 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
事业单位岗位说明书
2015/10/08 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL