这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了基于 JS 实现类似支付宝支付密码输入框功能,密码框只准输入数字且只可以输入 6 位数字,非常不错,具有参考借鉴价值, 需要的朋友可以参考下
本文实现的是一个类似支付宝支付密码的界面,只可以输入数字,且只可以输入 6 位
首先给大家展示下效果图,如果感觉不错,请参考实现代码。
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 实现类似支付宝支付密码输入框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0707/332143.html