类似于这样的
以下直接贴代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>蒙版遮罩</title>
<link rel="stylesheet" type="text/css" href="main.css" >
</head>
<body >
<div class="tl-content">
<iframe style="height: 100vh;width: 100%" frameborder="0" src="tl_iframe.html"></iframe>
<div class="tl-shade"> </div>
<form></form>
<div class="tl-pupout">
<ul class="tl-pupout-ul" id="wrap">
<li class="tl-pupout-li"><input type="text" name="key1" style="text-align: center" placeholder="-"></li>
<li class="tl-pupout-li"><input type="text" name="key1" style="text-align: center" placeholder="-"></li>
<li class="tl-pupout-li"><input type="text" name="key1" style="text-align: center" placeholder="-"></li>
<li class="tl-pupout-li"><input type="text" name="key2" style="text-align: center" placeholder="-"></li>
</ul>
<div class="tl-pupout-text" id="tl-pupout-text">
<p>1.文字描述1</p>
<p>2.文字描述2</p>
</div>
</div>
</div>
<script>
onload = function(){
var txts = wrap.getElementsByTagName("input");
for(var i = 0; i<txts.length;i++){
var t = txts[i];
t.index = i;
t.setAttribute("readonly", true);
t.onkeyup=function(){
this.value=this.value.replace(/^(.).*$/,'$1');
var next = this.index + 1;
if(next > txts.length - 1){
alert('提交');
document.getElementById("tl-pupout-text").style.display="block";
}
txts[next].removeAttribute("readonly");
txts[next].focus();
}
}
txts[0].removeAttribute("readonly");
}
</script>
</body>
</html>
css代码也直接贴给你们,不去整理了。因为我是做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{
border-radius: 5px;
height:50px;
margin: 10px;
padding: 10px;
background-color: rgba(255, 255, 255, 0.8);
}
.tl-pupout-text{
display: none;
border-radius: 5px;
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;
}
}