基于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面向对象之静态与非静态类
Feb 03 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
vue ssr 指南详读
Jun 29 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
ES6实现图片切换特效代码
Jan 14 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 Javascript
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
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
开始着手第一个Django项目
2015/07/15 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
在python中pandas的series合并方法
2018/11/12 Python
django如何自己创建一个中间件
2019/07/24 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
工商学院毕业生自荐信
2013/11/12 职场文书
绿色环保演讲稿
2014/05/10 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
质量主管工作职责
2014/09/26 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
优秀党支部申报材料
2014/12/24 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang