簡訊驗證碼輸入框 6位
阿新 • • 發佈：2019-02-06
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <script src="../js/commonJs/jquery-1.8.3.min.js"></script> <title>六位input輸入框的簡訊驗證碼(PC) </title> <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/> <style> /*彈框驗證碼*/ .ipt-fake-box { text-align: center; } .input { display: inline-block; } .input:last-child { border-right: 1px solid #999; } input.my_input { border-top: 1px solid #999; border-bottom: 1px solid #999; border-left: 1px solid #999; width: 45px; height: 45px; outline: none; font-family: inherit; font-size: 28px; font-weight: inherit; text-align: center; line-height: 45px; color: #c2c2c2; background: rgba(255, 255, 255, 0); } </style> <script src="../js/commonJs/bootstrap.min.js"></script> </head> <body> <div id="openModel">點選開啟彈框並觸發傳送簡訊驗證碼介面</div> <div class="modal fade" id="applyPhone" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header settingHeader"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> ×</button> <h4 class="modal-title" id="myModalLabel"> 請輸入簡訊驗證碼 </h4></div> <div class="modal-body settingBody"> <div class="ipt-box-nick mb15-nick"> <div class="ipts-box-nick"> <div class="ipt-fake-box"> <input type="tel" class="my_input" id="firstInput" maxlength="1"> <input type="tel" class="my_input" maxlength="1" id="firstInput1"> <input type="tel" class="my_input" maxlength="1" id="firstInput2"> <input type="tel" class="my_input" maxlength="1" id="firstInput3"> <input type="tel" class="my_input" maxlength="1" id="firstInput4"> <input type="tel" class="my_input" maxlength="1" id="firstInput5"> </div> </div> </div> </div> <div class="modal-footer settingFooter" id="myfooters"> <div id="btnSendCode"> <div>驗證碼錯誤 <span id="againSend">重新發送</span></div> </div> </div> </div> </div> </div> <script> $('#openModel').on('click',function(){ //開啟彈框 $('#applyPhone').modal(); var active = 0; var inputBtn = document.querySelectorAll('.my_input'); for (var i = 0; i < inputBtn.length; i++) { inputBtn[i].addEventListener('click', function () { inputBtn[active].focus(); }, false); inputBtn[i].addEventListener('focus', function () { this.addEventListener('keyup', listenKeyUp, false); }, false); inputBtn[i].addEventListener('blur', function () { this.removeEventListener('keyup', listenKeyUp, false); }, false); } /** * 監聽鍵盤的敲擊事件 */ function listenKeyUp() { if (/^[0-9]*$/g.test(this.value)) { if (!isNaN(this.value) && this.value.length != 0) { if (active < 5) { active += 1; } inputBtn[active].focus(); } else if (this.value.length == 0) { if (active > 0) { active -= 1; } inputBtn[active].focus(); } if (active >= 5) { //執行其他操作 獲取6個輸入的值 var codeSix = $('#firstInput').val() + $('#firstInput1').val() + $('#firstInput2').val() + $('#firstInput3').val() + $('#firstInput4').val() + $('#firstInput5').val(); console.log('輸入完整，執行操作'); if (codeSix && codeSix.length == '6') { //輸入6個數值了，執行輸入完成的動作，這裡比方說輸入完成要做一個驗證碼的驗證 var params = { 需要傳給後臺的引數 }; $.ajax({ type: "post", url: 驗證驗證碼是否正確的介面地址, contentType: 'application/json', data: JSON.stringify(params), xhrFields: { withCredentials: true }, crossDomain: true, async: true, dataType: "json", //介面成功回撥 success: function (data) { if (data['state'] == 200 || data['State'] == 200) { //如果輸入的驗證碼和手機簡訊的驗證碼一致，則隱藏彈框，並執行驗證通過後的回撥 $('#applyPhone').modal('hide'); allSuccess();//成功後的回撥，這裡換成你自己的操作 } else { //講input下方的提示語改成介面返回的錯誤資訊，並讓使用者重新發送驗證碼 var strs = ['<div>' + data['Msg'] + ' <span id="againSend">重新發送</span></div>'].join(""); $('#btnSendCode').html(strs); window.clearInterval(InterValObj);//直接清除定時器 //input框全部清除，並將第一個框定位焦點 $('#firstInput').val(''); $('#firstInput1').val(''); $('#firstInput2').val(''); $('#firstInput3').val(''); $('#firstInput4').val(''); $('#firstInput5').val(''); active = 0; $('#firstInput').focus(); //點選再次傳送按鈕，重新調取傳送驗證碼介面 $('#againSend').bind('click', function () { getPhoneCode(); active = 0; $('#firstInput').focus(); }); } }, error: function (data) { console.log(data); } }); } } } else { this.value = ''; } } //觸發驗證碼獲取介面 getPhoneCode(); //獲取驗證碼 function getPhoneCode() { window.clearInterval(InterValObj);//停止計時器 //驗證碼倒計時 var count = 60; //間隔函式，1秒執行 var curCount = count; $("#btnSendCode").html('簡訊驗證碼已傳送至+' + 此處填寫需要傳送驗證碼的手機號 + ",請在" + curCount + "秒後可重新發送"); InterValObj = window.setInterval(SetRemainTime, 1000); //啟動計時器，1秒執行一次 //timer處理函式 function SetRemainTime() { if (curCount == 0) { window.clearInterval(InterValObj);//停止計時器 $("#btnSendCode").removeAttr("disabled");//啟用按鈕 $("#btnSendCode").html("重新發送驗證碼"); active = 0; $('#btnSendCode').bind('click', function () { getPhoneCode(); active = 0; $('#firstInput').focus(); }); } else { curCount--; $("#btnSendCode").html('簡訊驗證碼已傳送至+' + 此處填寫需要傳送驗證碼的手機號 + ",請在" + curCount + "秒後可重新發送"); } } var url = 此處填寫獲取手機驗證碼的url; var param = { 此處是獲取手機驗證碼的引數 }; //用ajax獲取驗證碼 $.ajax({ type: "post", url: url, cache: false, processData: false, contentType: 'application/x-www-form-urlencoded;charset=utf-8', data: $.param(param), xhrFields: { withCredentials: true }, crossDomain: true, async: true, success: function (data) { if (data['State'] == '200') { //傳送驗證碼成功回撥 $('#firstInput').focus(); } }, error: function (data) { console.log(data); } }); } }); </script> </body>