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 查找select ,并触发事件的实现代码
Mar 30 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
javascript常用方法总结
May 14 Javascript
一分钟理解js闭包
May 04 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
Javascript中parseInt的正确使用方式
Oct 17 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
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异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
PHP goto语句用法实例
2019/08/06 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
python创建和使用字典实例详解
2013/11/01 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
python 有效的括号的实现代码示例
2019/11/11 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
尊师重教演讲稿
2014/09/04 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
高三教师工作总结2015
2015/07/21 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
基于Redission的分布式锁实战
2022/08/14 Redis