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 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
python使用PyQt5的简单方法
2019/02/27 Python
python tkinter基本属性详解
2019/09/16 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
为什么是 Python -m
2020/06/19 Python
Python 多进程原理及实现
2020/12/21 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
敬老院活动总结
2014/04/28 职场文书
中队活动总结
2014/08/27 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
2014年租房协议书范本
2014/10/30 职场文书
六年级学生期末评语
2014/12/26 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书