html输入密码跳转文本,js获取inpu焦点，输入完1位数字后自动跳到第二个input，类似支付宝密码输入完自动跳转...

类似于这样的

以下直接贴代码

蒙版遮罩

1.文字描述1

2.文字描述2

onload = function(){

var txts = wrap.getElementsByTagName("input");

for(var i = 0; i

var t = txts[i];

t.index = i;

t.setAttribute("readonly", true);

t.οnkeyup=function(){

this.value=this.value.replace(/^(.).*$/,'$1');

var next = this.index + 1;

if(next > txts.length - 1) alert('提交');

txts[next].removeAttribute("readonly");

txts[next].focus();

}

}

txts[0].removeAttribute("readonly");

}

代码也直接贴给你们，不去整理了。因为我是做php的，不是专业前端。

/*taolei*/

html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {

margin: 0;

padding: 0;

}

*{box-sizing: border-box;}

html, body {

min-height: 100%;

}

body {

font-family: "Microsoft YaHei";

font-size:14px;

color:#333;

}

h1, h2, h3, h4, h5, h6{font-weight:normal;}

ul,ol {

list-style: none;

}

img {

border: none;

vertical-align: middle;

}

a {

text-decoration: none;

color: #232323;

}

table {

border-collapse: collapse;

table-layout: fixed;

}

input, textarea {

outline: none;

border: none;

}

textarea {

resize: none;

overflow: auto;

}

.clearfix {

zoom: 1;

}

.clearfix:after {

content: ".";

width: 0;

height: 0;

visibility: hidden;

display: block;

clear: both;

overflow:hidden;

}

.fl {

float: left

}

.fr {

float: right

}

.tl {

text-align: left;

}

.tc {

text-align: center

}

.tr {

text-align: right;

}

.ellipse {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.inline{

display: inline-block;

*display: inline;

*zoom: 1;

}

/*taolei*/

.tl-content{

position: relative;

height: 100vh;

width: 100%;

overflow-y: hidden;

}

.tl-shade{

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: rgba(51, 51, 51, 0.3);

}

.tl-pupout{

position: absolute;

width: 800px;

top: 20%;

left: 50%;

margin-left: -400px;

}

.tl-text-img{

width: 100%;

height: 100vh;

background-position: center center;

}

.tl-pupout-ul{

display: flex;

justify-content: space-between;

flex-wrap: wrap;

}

.tl-pupout-li{

width: 25%;

}

.tl-pupout-li input{

height:50px;

margin: 10px;

padding: 10px;

background-color: rgba(255, 255, 255, 0.8);

}

.tl-pupout-text{

margin: 20px;

padding: 10px;

background-color: rgba(255, 255, 255, 0.8);

}

@media screen and (max-width: 800px) {

.tl-pupout{

width: 90%;

top: 20%;

left: 5%;

margin-left:0;

}

.tl-pupout-box{

margin: 10px;

padding: 10px;

background-color: rgba(255, 255, 255, 0.8);

max-height: 100px;

overflow-y: auto;

}

.tl-pupout-text{

margin: 10px;

padding: 10px;

}

}