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 相关文章推荐
js或css实现滚动广告的几种方案
Jan 28 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 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
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
再论Javascript的类继承
2011/03/05 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
Python中的descriptor描述器简明使用指南
2016/06/02 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
Python实现进程同步和通信的方法
2018/01/02 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
Python 如何提高元组的可读性
2019/08/26 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
wxPython实现整点报时
2019/11/18 Python
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
jQuery treeview树形结构应用
2021/03/24 jQuery
药剂专业学生求职信范文
2013/12/28 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
保护母亲河倡议书
2014/04/14 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
班主任高考寄语
2015/02/26 职场文书
山楂树之恋观后感
2015/06/11 职场文书