JavaScript仿支付宝密码输入框
现在很多时候大家付款的场景都是在手机上面，而随着H5页面的开发变得越来越方便，很多场景也从客户端搬到了浏览器中，其中支付这个场景就很自然的被放在了浏览器中。那么这样的输入框大家一定不会陌生吧：
那么今天我就用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、HTML5、canvas的使用方法。2013-10-10
这篇文章主要介绍了js操作cookie保存浏览记录的方法,涉及JavaScript使用cookie记录并保存用户浏览网页信息的实现技巧,需要的朋友可以参考下2015-12-12![Javascript验证上传图片大小[前台处理]](//img.jbzj.com/images/xgimg/bcimg2.png)
在做上传图片的时候，如果不限制上传图片大小，后果非常的严重。解决这个问题有两种方式：后台处理、前台处理2014-07-07
下面小编就为大家带来一篇仿百度换肤功能的简单实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要为大家介绍了String对象的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了JavaScript不刷新实现浏览器的前进后退功能,本文给出了HTML5解决方案、老旧浏览器的写法等方法,需要的朋友可以参考下2014-11-11
这篇文章主要给大家介绍了关于three.js中文文档学习之通过模块导入的相关资料，文中通过示例代码介绍的非常详细，对大家学习或使用three.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-11-11
dva 有一个管理 effects 执行的 hook，并基于此封装了 dva-loading 插件。下面通过本文给大家分享DVA框架统一处理所有页面的loading状态，感兴趣的朋友一起看看吧2017-08-08
这篇文章主要介绍了js给selected添加options的方法,涉及javascript动态添加页面下拉列表selected的技巧,需要的朋友可以参考下2015-05-05
了解最新的框架，提升我们的开发效率。2009-03-03
![Javascript验证上传图片大小[前台处理]](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论