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 相关文章推荐
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
jquery简易手风琴插件的封装
Oct 13 jQuery
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
第十一节 重载 [11]
2006/10/09 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
解决python运行启动报错问题
2020/06/01 Python
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
有关打架的检讨书
2014/01/25 职场文书
优秀公益广告词大全
2014/03/19 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
2019教师的学习计划
2019/06/25 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android