基于JS实现类似支付宝支付密码输入框


Posted in Javascript onSeptember 02, 2016

本文实现的是一个类似支付宝支付密码的界面,只可以输入数字,且只可以输入6位

首先给大家展示下效果图,如果感觉不错,请参考实现代码。

基于JS实现类似支付宝支付密码输入框

1、样式表

.wrap{
margin: 10px auto;
width: 329px;
height: 640px; 
padding-top: 200px;
}
.inputBoxContainer{
width: 240px;
height: 50px;
margin: 0 auto;
position: relative;
}
.inputBoxContainer .bogusInput{
width: 100%;
height: 100%;
border: #c3c3c3 1px solid;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
overflow: hidden;
position: absolute;
z-index: 0;
}
.inputBoxContainer .realInput{
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
z-index: 1;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
}
.inputBoxContainer .bogusInput input{
padding: 0;
width: 16.3%;
height: 100%;
float:left;
background: #ffffff;
text-align: center;
font-size: 20px;
border: none;
border-right: #C3C3C3 1px solid;
}
.inputBoxContainer .bogusInput input:last-child{
border: none;
}
.confirmButton{
width: 240px;
height: 45px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
background: #f4f4f4;
border: #d5d5d5 1px solid;
display: block;
font-size: 16px;
margin: 30px auto;
margin-bottom: 20px;
}
.showValue{
width: 240px;
height: 22px;
line-height: 22px;
font-size: 16px;
text-align: center;
margin: 0 auto;
}

2、HTML代码

<div class="wrap">
<div class="inputBoxContainer" id="inputBoxContainer">
<input type="text" class="realInput"/>
<div class="bogusInput">
<input type="password" maxlength="6" disabled/>
<input type="password" maxlength="6" disabled/>
<input type="password" maxlength="6" disabled/>
<input type="password" maxlength="6" disabled/>
<input type="password" maxlength="6" disabled/>
<input type="password" maxlength="6" disabled/>
</div>
</div>
<button id="confirmButton" class="confirmButton">查看</button>
<p class="showValue" id="showValue"></p>
</div>

3、js代码控制逻辑效果

(function(){
var container = document.getElementById("inputBoxContainer");
boxInput = {
maxLength:"",
realInput:"",
bogusInput:"",
bogusInputArr:"",
callback:"",
init:function(fun){
var that = this;
this.callback = fun;
that.realInput = container.children[0];
that.bogusInput = container.children[1];
that.bogusInputArr = that.bogusInput.children;
that.maxLength = that.bogusInputArr[0].getAttribute("maxlength");
that.realInput.oninput = function(){
that.setValue();
}
that.realInput.onpropertychange = function(){
that.setValue();
}
},
setValue:function(){
this.realInput.value = this.realInput.value.replace(/\D/g,"");
console.log(this.realInput.value.replace(/\D/g,""))
var real_str = this.realInput.value;
for(var i = 0 ; i < this.maxLength ; i++){
this.bogusInputArr[i].value = real_str[i]?real_str[i]:"";
}
if(real_str.length >= this.maxLength){
this.realInput.value = real_str.substring(0,6);
this.callback();
}
},
getBoxInputValue:function(){
var realValue = "";
for(var i in this.bogusInputArr){
if(!this.bogusInputArr[i].value){
break;
}
realValue += this.bogusInputArr[i].value;
}
return realValue;
}
}
})()
boxInput.init(function(){
getValue();
});
document.getElementById("confirmButton").onclick = function(){
getValue();
}
function getValue(){
document.getElementById("showValue").innerText = boxInput.getBoxInputValue();
}

以上所述是小编给大家介绍的基于JS实现类似支付宝支付密码输入框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript在一段文字中的光标处插入其他文字
Aug 26 Javascript
JavaScript 设计模式学习 Factory
Jul 29 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
仿jQuery的siblings效果的js代码
Aug 09 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
TypeScript高级用法的知识点汇总
Dec 17 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
JavaScript中Number对象的toFixed() 方法详解
Sep 02 #Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 #Javascript
AngularJs  Understanding Angular Templates
Sep 02 #Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 #Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 #Javascript
AngularJs  E2E Testing 详解
Sep 02 #Javascript
解决node.js安装包失败的几种方法
Sep 02 #Javascript
You might like
PHP中文件上传的一个问题
2010/09/04 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
python简单获取数组元素个数的方法
2015/07/13 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
django用户登录和注销的实现方法
2018/07/16 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
爱祖国演讲稿
2014/05/04 职场文书
市场营销计划书
2015/01/17 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
居安思危观后感
2015/06/11 职场文书
运动会广播稿20字
2015/08/19 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python