html输入支付密码样式,基于JS实现类似支付宝支付密码输入框
基于JS实现类似支付宝支付密码输入框
2019-01-06
编程之家
https://www.jb51.cc
编程之家收集整理的这篇文章主要介绍了基于JS实现类似支付宝支付密码输入框,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
本文实现的是一个类似支付宝支付密码的界面,只可以输入数字,且只可以输入6位
首先给大家展示下效果图,如果感觉不错,请参考实现代码。
1、样式表
BoxContainer{
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;
}
BoxContainer" id="inputBoxContainer">
3、js代码控制逻辑效果
BoxContainer");
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实现类似支付宝支付密码输入框。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
总结
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!
html输入支付密码样式,基于JS实现类似支付宝支付密码输入框相关推荐
- html输入支付密码样式,移动端支付密码虚拟键盘样式+功能实现
21164633.png 上代码 支付密码 a, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, figcaption, f ...
- php支付密码控件,Android高仿微信支付密码输入控件实例代码
这篇文章主要为大家详细介绍了Android高仿微信支付密码输入控件的具体实现代码,供大家参考,具体内容如下 像微信支付密码控件,在app中是一个多么司空见惯的功能.最近,项目需要这个功能,于是乎就实现 ...
- uniapp 密码支付,多样式支付,数字密码,支付密码,数字键盘,多样自定义支付组件,可以根据用户需求调节支付样式,总共八中组合满足大多数需求,真正的开箱即用
插件链接:https://ext.dcloud.net.cn/plugin?id=2591 作者说 开发不易,如果帮助到你的,请支持 有问题请留言,作者会积极更新 使用方法 # 基础用法 复制代码 & ...
- 基于python-django框架的支付宝支付案例
目录 @ 一. 开发前的准备 1. 必须了解的知识 SDK:软件开发工具包,可以为开发者提供快速开发的工具 沙箱环境:也就是测试环境 支付宝支付金额的精度:小数点后两位(面试) 支付宝用的什么加密方式 ...
- php开发支付宝支付密码忘记了怎么办_PHP接入支付宝教程
0.准备工作 支付宝账号验证 签约接口 私钥生成 1. 拼凑订单 1.1 拼装订单 1.2 私钥签名 2 服务器端处理 2.1 支付宝处理流程图 3 代码实现 3.1 开启CURL 3.2 填写配置 ...
- fiddler修改支付金额_Spring MVC+Spring+Mybatis实现支付宝支付功能(图文详解+代码
师长说: 之前师长就发过一篇超详细的微信支付文章:一文快速实现微信公众号支付功能(详细版,建议收藏备用),有人就说要雨露均沾...支付宝的也要.好的,这篇同样超详细的支付宝支付收藏好了! 前言 本教程 ...
- html发起微信或支付宝支付,vue实现-微信网页中唤起支付宝支付
微信浏览器内是无法唤起支付宝的,会提示在浏览器打开,类似下面 image.png 所以在微信公众号的支付宝支付最终是通过手机浏览器唤起的支付宝支付,按照手机网站的支付方式即可. 官方也有demo,官方 ...
- java 支付宝h5网页支付接口,移动端h5网页调用支付宝支付接口
领导第一次让我做h5支付宝支付的时候,去了支付宝开放平台,一顿上上下下左左右右,看完了长呼一口气.这个支付好像没我啥事儿啊!小伙伴儿们自行查看:https://opendocs.alipay.com/ ...
- App接入阿里支付宝支付,app如何开通接入支付宝支付功能,APP如何申请阿里支付宝支付
注意时间,现在是 2021年8月12日 首先,需要注册一个支付宝企业身份的账号. 然后开始. 1.进入蚂蚁金服开放平台https://open.alipay.com/platform/home.htm ...
最新文章
- indows上的android开发环境软件架构5
- MySql的安装、配置(转)
- .NET Core开发日志——配置
- 圣诞节插画素材|设计师再忙也要看一看,没准可以帮助到你!
- 12、常见Conditional注解源码解析(ok)
- python学习手册-Python 重点知识整理(基于Python学习手册第四版)
- ubuntu16:查看磁盘空间大小,查看每个用户的占用空间情况
- 旋转研究(矩阵,欧拉角,四元数)
- 用友漏洞php,用友NC任意文件上传漏洞复现
- Chrome插件-Dark reader,护眼的黑暗模式浏览器
- 大学高数常微分方程思维导图_思维导图_2016考研数学:高数中六种常见题型归纳_沪江英语...
- LintCode 快速幂
- Spark安装及配置详细步骤
- 微信小程序用自己的服务器视频打开很慢,微信小程序视频播放加载很慢
- oracle spatial特点,Oracle Spatial中SDO_Geometry详细说明
- TeamViewer一直显示“未就绪”什么原因?
- 长期执业的顶尖领先律所ROSEN提醒Mylan N.V.投资者注意MYL证券集体诉讼的重要截止日期为8月25日
- 纳米数据世界杯数据,世界杯分组,世界杯赛程,世界杯实时比分api接口
- iuap助力中建五局打造数字化创新集成平台
- 异丁酰氯(CAS 79-30-1)的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
热门文章
- linux故障排查书籍,Linux系统故障排查和修复技巧.docx
- 在 Windows 命令提示符下启动 MySQL:net start mysql 发生系统错误 5。 拒绝访问。解决方式小结
- python 怎么调用 矩阵 第几行_第58集 python机器学习:混淆矩阵精度指标
- python可以做计量分析吗_技术分享 - python数据分析(2)——数据特征分析(上)...
- matlab转差频率控制,转差频率控制的异步电机调速系统的研究
- 趣学java,编程趣学习app
- 神经网络加载数据 自建数据集 官方数据集 pytorch 显示数据集
- python matplotlib 绘制曲线图,柱状图
- PDF文件如何转成markdown格式 1
- BABOK - 企业分析(Enterprise Analysis)概要