JS Imitation payment po Multi-box Input payment password effect _javascript skills

Last saw someone say write a similar payment treasure payment password input box effect, today I want to write a try, the general function is realized.

Implemented parts:
1. The focus will go back with the input values
2. If you enter a non-0-9, you will receive a prompt
3. Press Backspance carriage return can correspond to lattice focus forward
4. Press Enter or click button to trigger button click event, get input value

Imperfect parts:
1. In the control of the input type, only 0-9, not 0-9, as well as carriage return, delete a few keyboard events distinguish, not perfect
2. Input box, password type, will be the input value into a dot, but the dot is too small and not beautiful, do not know how to change the size of the dot, consider whether to draw a dot cover

PS: The code is not concise enough, and many feelings can be improved and streamlined.

Effect Chart:

Code Snippets:

**index.html Main Code * *

<div class= "Content" >
 <div class= "title" > Alipay payment password:</div> <div class=
 "box" ></div >
 <div class= "Forget" > Forgot password? </div>
 <div class= "point" > Please enter 6 digit password </div>
 <button class= "GETPASSWORDBTN" > a key to get the password </button>
 <div class= "Errorpoint" > Please enter a number! </div>

</div>

**RESET.CSS Code * *

*{padding:0;
margin:0;
 }. content{width:400px;
 height:50px;
 margin:0 Auto;

margin-top:100px;
 }. title{font-family: ' Microsoft Ya-hei ';
font-size:16px;
 }. box{width:190px;
 height:30px;
 border:1px solid #ccc;
 margin-top:10px;
line-height:30px;
 box,.forget{display:inline-block. Content. forget{width:100px;
 Color:lightskyblue;
 Vertical-align:super;
font-size:14px;
 Box input.paw{width:30px;
 height:20px;
 line-height:20px;
 Margin-left: -9px;
 Border:none;
 border-right:1px dashed #ccc;
Text-align:center; Box Input.paw:nth-child (1) {margin-left:0}. content. Box. Pawdiv:nth-child (6) input.paw{border:none; content
 . box input.paw:focus{outline:0; content. box. pawdiv{Display:inline-block;
 line-height:30px;
 width:31px;
 height:31px;
 Margin-top: -2px;
Float:left;
 }. point{font-size:14px;
 Color: #ccc;
margin:5px 0;
 }. errorpoint{color:red;
Display:none;
 }. getpasswordbtn{width:100px;
 height:30px; BacKground-color:cornflowerblue;
 font-size:14px;
 font-family: ' Microsoft Ya-hei ';
 Color:white;
Border:none;
 }

**main.js Code * *

/* Dynamic Generation * * var box=document.getelementsbyclassname ("box") [0];
  function Creatediv (num) {for (Var i=0;i<num;i++) {var pawdiv=document.createelement ("div");
  Pawdiv.classname= "Pawdiv";
  Box.appendchild (PAWDIV);
  var paw=document.createelement ("input");
  paw.type= "Password";
  Paw.classname= "Paw";
  Paw.maxlength= "1";
  Paw.readonly= "ReadOnly";
 Pawdiv.appendchild (PAW);



} creatediv (6);
var pawdiv=document.getelementsbyclassname ("Pawdiv");
var paw=document.getelementsbyclassname ("Paw");
var pawdivcount=pawdiv.length;
/* Set the first input box by default SELECT */Pawdiv[0].setattribute ("style", "border:2px solid deepskyblue;");
Paw[0].readonly=false;

Paw[0].focus ();
var errorpoint=document.getelementsbyclassname ("Errorpoint") [0];
   /* Binding Pawdiv Click event/function func () {for (Var i=0;i<pawdivcount;i++) {Pawdiv[i].addeventlistener ("click", Function () {
  Pawdivclick (this);
  });
   Paw[i].onkeyup=function (event) {Console.log (Event.keycode); if (event.keycode>=48&&event.keycode<=57) {/* lostInto 0-9*/changediv ();

   Errorpoint.style.display= "None";

   }else if (event.keycode== "8") {/* BACKSPACE back Delete event/firstdiv ();

   }else if (event.keycode== "13") {/* Carriage return Event/GetPassword ();
    }else{/* Input non-0-9*/errorpoint.style.display= "block";
   This.value= "";
 }

  };


} func (); /* Define PAWDIV Click event/var pawdivclick=function (e) {for (Var i=0;i<pawdivcount;i++) {Pawdiv[i].setattribute ("style", "
 Border:none ");


} e.setattribute ("Style", "border:2px solid deepskyblue;"); /* definition automatically selects the next Input box event/var changediv=function () {for (Var i=0;i<pawdivcount;i++) {if (paw[i].value.length== "1") {/* handles the current

   Input Frame */Paw[i].blur ();
   /* Process the previous input box * * Paw[i+1].focus ();
   Paw[i+1].readonly=false;
  Pawdivclick (pawdiv[i+1]);

}
 }
};
  /* Delete the previous input box to select the Event/var firstdiv=function () {for (Var i=0;i<pawdivcount;i++) {Console.log (i);
   if (paw[i].value.length== "0") {/* Process the current input box * * Console.log (i);

   Paw[i].blur ();
   /* Process the previous input box * * Paw[i-1].focus (); Paw[i-1].readonly=false;
   Paw[i-1].value= "";
   Pawdivclick (Pawdiv[i-1]);
  Break



}
 }
};
 /* Get input password * * var getpassword=function () {var n= "";
 for (Var i=0;i<pawdivcount;i++) {n+=paw[i].value;
alert (n);
};

var getpasswordbtn=document.getelementsbyclassname ("getpasswordbtn") [0];

Getpasswordbtn.addeventlistener ("click", GetPassword);
 /* Keyboard Event/document.onkeyup=function (event) {if (event.keycode== "13") {/////GetPassword ();
 }
};

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.