js input連續輸入回退連續刪除 js input模仿移動端連續輸入回退連續刪除 全網只有一份
阿新 • • 發佈：2018-12-03
確實是全網找不到的例子，也確實是吹牛逼公司前端寫了一點，但是存在ug當輸入完四個，回退刪了兩個，獲取的只剩下兩個，我又天天補補了一下,
直接上程式碼吧
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>模仿移動端的input連續輸入回退刪除</title> <style type="text/css"> .box { width: 350px; height: 100px; margin: 0 auto; } .box input { width: 40px; height: 40px; margin: 5px 13px; text-align: center; line-height: 40px; border-radius: 3pxgrouponStart; border: 1px solid red; } .num{ width: 354px; height: 100px; margin: 0 auto; background: #000c0c; } .num h1{ text-align: center; line-height: 100px; color: #fff; } </style> </head> <body> <div class="box"> <input type="" name="" class="a" id="btn1" value="" maxlength="1" /> <input type="" name="" class="a" id="btn2" value="" maxlength="1" /> <input type="" name="" class="a" id="btn3" value="" maxlength="1" /> <input type="" name="" class="a" id="btn4" value="" maxlength="1" /> </div> <div class="num"> <h1 id='codetxt'> </h1> </div> <p style="text-align: center;width: 1000px;display: block;margin: 20px auto;color: plum;"> 模仿手機端input連續輸入，刪除時連續刪除。這種情況用於驗證嗎的輸入，比如後臺給了一個驗證碼 我們需要輸入這個驗證碼去後臺驗證的情況，存在點bug，但是當我們輸入滿了四個驗證碼就會執行下面的彈窗方法 如果不加那個方法，輸入滿了四個後面的數字還會繼續增加，input中的maxlength這個屬性為什麼不啟用， 我也好奇。 </p> </body> </html> <script type="text/javascript"> var code;//定義全域性的code 頁就是最後輸入完的四位數驗證碼 var btns = document.getElementsByClassName('a'); code = ''; for(var i = 0, btnlength = btns.length; i < btnlength; i++) { btns[0].focus(); btns[i].onkeyup = (function(i) { return function() { if(this.value.length == 1) { if(i + 1 < btnlength) { btns[i + 1].focus(); code += btns[i].value; } if(i == btnlength - 1) { code = code + btns[i].value; var btn2val = document.getElementById('btn2').value; for(var c = 0; c < code.length; c++) { code1 = code[0]; if(code.length == 3) {//這一段感覺沒嚴謹但是效果師達到了 btn4val = document.getElementById('btn4').value; btn3val = document.getElementById('btn3').value; code = code1 + btn2val + btn3val + btn4val; } } document.getElementById('codetxt').innerHTML = code;//這一句實際中用不上，只是用於上面的列印 //這裡就可以呼叫方法，例如opwen() openserch(); } } else { if(i - 1 >= 0) { btns[i - 1].focus(); btns[i - 1].value = ''; code = ''; code = code + btns[i - i].value; document.getElementById('codetxt').innerHTML='';//這一句實際中用不上，只是用於上面的列印 } } } })(i) } function openserch(){ alert(code); //這裡就可以像後臺傳送請求，幫這個輸入的驗證碼拿去後臺驗證 } </script>