A tutorial on JavaScript implementation of the 6-digit digital password input box for imitation Alipay

A few days ago, the project has a function and a treasure shopping to pay the password of the input box a bit similar, wrote this blog, right when the summary notes.

?? Kidnap policeman was stationed soy play with benzene by washing oldest?/p>

Structure Layer:

<div> <div> Please enter 6 digits below </div> <div class= "Ipt-box-nick" > <input type= "Tel" maxlength= "6" class= "Ipt-real-nick"/> <div class= "Ipts-box-nick" > <div class= "Ipt-fake-box" > <input type= "Text" > <input type= "Text" > <input type= "Text" > <input type= "Text" > <input type= "Text" > <input type= "Text" > </div> </div> <div class= "Ipt-active-nick" ></div> </div> </div>

Through the structural layer, analysis of the general idea:

This feature is the story of a real input box and 6 fake input boxes.

The real input box and the fake input frame container are positioned overlapping, pay attention to the real input box priority set higher, or you can not input.

In order to make a seemingly false input box in the input, then the real input box hidden, with opacity hide oh.

When user input, the value of the real input box is assigned to each false input box through the behavior layer JS.

Input at the same time, control the false input box cursor effect, I used a picture of a certain treasure made of, in fact, false input box is not get the focus.

Attention:

The type of the actual input box here is in Tel, not number. Because the latter will generate small arrows, the former when the user clicks on the input box app to determine the type is Tel will pop up digital input keyboard better.

Presentation layer:

. ipt-box-nick { height:40px!important; line-height:40px!important; Position:relative!important; } . Ipt-box-nick. Ipt-real-nick { Position:absolute!important; Top:0!important; Left:0!important; width:100%; height:40px!important; line-height:40px!important; Opacity:0!important; Z-index:3!important; } . Ipt-box-nick. Ipts-box-nick { Position:absolute!important; Top:0!important; Left:0!important; Z-index:1!important; width:100%; height:40px!important; line-height:40px!important; Overflow:hidden; } . Ipt-box-nick. Ipts-box-nick. Ipt-fake-box { height:40px!important; line-height:40px!important; Display:flex!important; Justify-content:space-between!important; } . Ipt-box-nick. Ipts-box-nick. Ipt-fake-box Input { width:40px!important; height:40px!important; border:1px Solid#d7d7d7!important; Color: #810213!important; Font-weight:bold!important; FONT-SIZE:18PX!important; Text-align:center!important; Padding:0!important; } . Ipt-box-nick. Ipt-active-nick { width:40px!important; height:40px!important; line-height:40px!important; Text-align:center; Position:absolute!important; top:0; left:0; Z-index:2; } . Ipt-box-nick. Ipt-active-nick img { Vertical-align:middle; }

There is a positioning overlap in the style, a hidden real input box, I do not want to nag more. CSS I write with sass, translation css a bit messy, bo friends will look at it.

Behavior Layer:

$ (". Ipt-real-nick"). On ("Input", function () { Console.log ($ (this). Val ()); Var$input = $ (". Ipt-fake-box input"); if (!$ (this). Val ()) {//no value cursor top $ ('. Ipt-active-nick '). CSS (' left ', $input. EQ (0). Offset (). Left-parseint ($ ('. Ipt-box-nick '). Parent (). CSS (' Padding-left ')) + ' px '); } if (/^[0-9]*$/g.test (this). Val ()) {//A value can only be a number Console.log ($ (this). Val ()); Varpwd = $ (this). Val (). Trim (); for (vari = 0, len = pwd.length i < len; i++) { $input. EQ (i). Val (Pwd[i]); if ($input. EQ (i). Next (). Length) {//analog cursor, position the picture container first, control the left value. $ ('. Ipt-active-nick '). CSS (' left ', $input. EQ (i+1). Offset (). Left-parseint ($ ('. Ipt-box-nick '). Parent (). CSS (' Padding-left ')) + ' px '); } } $input. each (function () {//empty all input after the current input with a value Varindex = $ (this). index (); if (index >= len) { $ (this). Val (""); } }); if (len = = 6) { Perform other actions Console.log (' input complete, perform operation '); } }else{//clears the Non-numeric in Val and returns the value of the pure number vararr=$ (This). Val (). Match (/\d/g); $ (this). Val ($ (a). Val (). Slice (0,$ (this). Val (). LastIndexOf (arr[arr.length-1)) +1)); Console.log ($ (this). Val ()); } });

Because of the Tel type, the PC-side compatibility issue, so add a bit of regular.

There is nothing complex in itself, I do not have much?? Aluminum play? ⒁ Badger ⑹ soil forgiveness?/p>

Attached complete code:

<! DOCTYPE html> <meta charset= "UTF-8" > <title> Imitation Alipay digital password input box </title> <style> . ipt-box-nick { width:300px; height:40px!important; line-height:40px!important; Position:relative!important; } . Ipt-box-nick. Ipt-real-nick { Position:absolute!important; Top:0!important; Left:0!important; width:100%; height:40px!important; line-height:40px!important; Opacity:0!important; Z-index:3!important; } . Ipt-box-nick. Ipts-box-nick { Position:absolute!important; Top:0!important; Left:0!important; Z-index:1!important; width:100%; height:40px!important; line-height:40px!important; Overflow:hidden; } . Ipt-box-nick. Ipts-box-nick. Ipt-fake-box { height:40px!important; line-height:40px!important; Display:flex!important; Justify-content:space-between!important; } . Ipt-box-nick. Ipts-box-nick. Ipt-fake-box Input { width:40px!important; HEIGHT:38PX!important; border:1px Solid#d7d7d7!important; Color: #810213!important; Font-weight:bold!important; FONT-SIZE:18PX!important; Text-align:center!important; Padding:0!important; border-radius:2px;} . Ipt-box-nick. Ipt-active-nick { width:40px!important; height:40px!important; line-height:40px!important; Text-align:center; Position:absolute!important; top:0; left:0; Z-index:2; } . Ipt-box-nick. Ipt-active-nick img { Vertical-align:middle; } </style> <body> <div> <div class= "Lh40-nick h40-nick fwb-nick" > Please enter a 6-digit number below </div> <div class= "Ipt-box-nick Mb15-nick" > <input type= "Tel" maxlength= "6" class= "Ipt-real-nick"/> <div class= "Ipts-box-nick" > <div class= "Ipt-fake-box" > <input type= "Text" > <input type= "Text" > <input type= "Text" > <input type= "Text" > <input type= "Text" > <input type= "Text" > </div> </div> <div class= "Ipt-active-nick" ></div> </div> </div> <script src= "//cdn.bootcss.com/jquery/3.1.1/jquery.min.js" ></script> <script> $ (". Ipt-real-nick"). On ("Input", function () { Console.log ($ (this). Val ()); Var$input = $ (". Ipt-fake-box input"); if (!$ (this). Val ()) {//no value cursor top $ ('. Ipt-active-nick '). CSS (' left ', $input. EQ (0). Offset (). Left-parseint ($ ('. Ipt-box-nick '). Parent (). CSS (' Padding-left ')) + ' px '); } if (/^[0-9]*$/g.test (this). Val ()) {//A value can only be a number Console.log ($ (this). Val ()); Varpwd = $ (this). Val (). Trim (); for (vari = 0, len = pwd.length i < len; i++) { $input. EQ (i). Val (Pwd[i]); if ($input. EQ (i). Next (). Length) {//analog cursor, position the picture container first, control the left value. $ ('. Ipt-active-nick '). CSS (' left ', $input. EQ (i+1). Offset (). Left-parseint ($ ('. Ipt-box-nick '). Parent (). CSS (' Padding-left ')) + ' px '); } } $input. each (function () {//empty all input after the current input with a value Varindex = $ (this). index (); if (index >= len) { $ (this). Val (""); } }); if (len = = 6) { Perform other actions Console.log (' input complete, perform operation '); } }else{//clears the Non-numeric in Val and returns the value of the pure number vararr=$ (This). Val (). Match (/\d/g); $ (this). Val ($ (a). Val (). Slice (0,$ (this). Val (). LastIndexOf (arr[arr.length-1)) +1)); Console.log ($ (this). Val ()); } }); </script> </body>

Effect Demo: