手動(dòng)實(shí)現(xiàn)js短信驗(yàn)證碼輸入框
本文記錄一下自己手動(dòng)實(shí)現(xiàn)的一個(gè)前端常見(jiàn)的短信驗(yàn)證碼輸入組件，從需求到實(shí)現(xiàn)逐步優(yōu)化的過(guò)程。
正文1.需求分析
首先看一下效果圖。
首先頁(yè)面加載的時(shí)候，輸入框獲取焦點(diǎn)，當(dāng)用戶輸入一個(gè)數(shù)字后，焦點(diǎn)自動(dòng)跳轉(zhuǎn)到第二個(gè)框，當(dāng)四個(gè)框全部輸入后，模擬發(fā)送提交請(qǐng)求，這里用一個(gè)彈框提示，輸出輸入的驗(yàn)證碼內(nèi)容。主流程之外的需求: 輸入框內(nèi)只能輸入數(shù)字類型，不能輸入字母，若強(qiáng)制輸入非數(shù)字類型按下撤回鍵時(shí)候輸入的驗(yàn)證碼置空并且把當(dāng)前焦點(diǎn)跳轉(zhuǎn)至第一個(gè)輸入框。
2.完整代碼實(shí)現(xiàn)。
大致思路就是頁(yè)面加載的時(shí)候，給第一個(gè)輸入框添加 autofocus 屬性，讓其自動(dòng)獲取焦點(diǎn)，然后監(jiān)聽(tīng)鍵盤(pán)點(diǎn)擊事件，當(dāng)鍵盤(pán)按下的時(shí)候，判斷當(dāng)前按鍵是否是數(shù)字按鍵，若不是，則當(dāng)前輸入框置空，焦點(diǎn)還在當(dāng)前輸入框，若為數(shù)字，則判斷前面的輸入框是否有數(shù)字存在，若不存在，則把焦點(diǎn)跳轉(zhuǎn)到前面空的一個(gè)輸入框，否則當(dāng)前輸入框輸入，并且焦點(diǎn)移至下一個(gè)輸入框，焦點(diǎn)通過(guò)輸入框的一個(gè)偽類實(shí)現(xiàn)，當(dāng)輸入長(zhǎng)度為為4時(shí)候，將每個(gè)輸入框數(shù)字拼接成字符串通過(guò)彈框提示。
<!DOCTYPE html><html lang='en'> <head> <meta charset='UTF-8' /> <meta http-equiv='X-UA-Compatible' content='IE=edge' /> <meta name='viewport' content='width=device-width, initial-scale=1.0' /> <title>Document</title> <style> .check-div {width: 400px;height: 600px;margin: 100px auto;border: 1px solid slategrey;text-align: center; } h1 {font-size: 24px; } .input-div {margin-top: 100px; } input {margin-left: 5px;text-align: center;width: 50px;height: 50px;border: none;/* 這里注意修改默認(rèn)外邊框?qū)傩?不用border*/outline: 1px solid black; } input:focus {outline: 2px solid #3494fe; } </style> </head> <body> <div class='check-div'> <h1>請(qǐng)輸入驗(yàn)證碼</h1> <div class='input-div'><input type='text' data-index='0' maxlength='1' autofocus/><input type='text' data-index='1' maxlength='1' /><input type='text' data-index='2' maxlength='1' /><input type='text' data-index='3' maxlength='1' /> </div> </div> <script> var inputArr = document.getElementsByTagName('input'); window.addEventListener('keyup', (e) => {let curIndex = e.target.getAttribute('data-index'); //獲取當(dāng)前輸入的下標(biāo)//如果點(diǎn)擊BackSpace刪除 這里刪除全部if (e && e.keyCode == 8) { console.log(22222222222); for (let j = 0; j <= 3; j++) { inputArr[j].value = ''; inputArr[0].focus(); } return;}console.log('e.keyCode', e.keyCode);//如果輸入的不是數(shù)字if (!(e.keyCode >= 48 && e.keyCode <= 57)) { console.log(1111111111); inputArr[curIndex].value = ''; return false;}//遍歷數(shù)組的值拼接成驗(yàn)證碼字符串var str = '';for (let j = 0; j <= 3; j++) { console.log(inputArr[j].value); str += inputArr[j].value;}var nextIndex = Number(curIndex) + 1;//判斷沒(méi)有屬夠四位驗(yàn)證碼的時(shí)候if (curIndex < 3 && str.length < 4) { for (let i = 0; i <= curIndex; i++) { // 判斷之前的是否有空即沒(méi)輸入的情況，存在則把焦點(diǎn)調(diào)整到前面，并且把輸入的后面給到最前面的一位，否則跳到下一位 if (!inputArr[i].value) { inputArr[curIndex].blur(); inputArr[i].value = inputArr[curIndex].value; var index = i + 1; inputArr[index].focus(); inputArr[curIndex].value = ''; return; } else { var nextIndex = Number(curIndex) + 1; inputArr[nextIndex].focus(); } }} else { alert('提交的驗(yàn)證碼是' + str); //輸入了四位驗(yàn)證碼的時(shí)候可以發(fā)送驗(yàn)證碼請(qǐng)求等等} }); </script> </body></html>總結(jié)
到此這篇關(guān)于手動(dòng)實(shí)現(xiàn)js短信驗(yàn)證碼輸入框的文章就介紹到這了,更多相關(guān)js短信驗(yàn)證碼輸入框內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. 在Android中使用WebSocket實(shí)現(xiàn)消息通信的方法詳解2. 淺談python出錯(cuò)時(shí)traceback的解讀3. Python importlib動(dòng)態(tài)導(dǎo)入模塊實(shí)現(xiàn)代碼4. python matplotlib:plt.scatter() 大小和顏色參數(shù)詳解5. windows服務(wù)器使用IIS時(shí)thinkphp搜索中文無(wú)效問(wèn)題6. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向7. Nginx+php配置文件及原理解析8. 利用promise及參數(shù)解構(gòu)封裝ajax請(qǐng)求的方法9. .NET中l(wèi)ambda表達(dá)式合并問(wèn)題及解決方法10. JSP數(shù)據(jù)交互實(shí)現(xiàn)過(guò)程解析
網(wǎng)公網(wǎng)安備