基于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

喜歡與人分享編程技術與工作經驗，歡迎加入編程之家官方交流群！