js獲取inpu焦點，輸入完1位數字後自動跳到第二個input，類似支付寶密碼輸入完自動跳轉
阿新 • • 發佈：2019-01-03
類似於這樣的
以下直接貼程式碼
<!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; } }