手動實現(xiàn)js短信驗證碼輸入框
更新時間：2021年06月07日 09:28:25 作者：丶Serendipity丶
本文記錄一下自己手動實現(xiàn)的一個前端常見的短信驗證碼輸入組件，從需求到實現(xiàn)逐步優(yōu)化的過程。具有一定的參考價值，感興趣的小伙伴們可以參考一下
前言
本文記錄一下自己手動實現(xiàn)的一個前端常見的短信驗證碼輸入組件，從需求到實現(xiàn)逐步優(yōu)化的過程。
正文
1.需求分析
首先看一下效果圖。
首先頁面加載的時候，輸入框獲取焦點，當用戶輸入一個數(shù)字后，焦點自動跳轉(zhuǎn)到第二個框，當四個框全部輸入后，模擬發(fā)送提交請求，這里用一個彈框提示，輸出輸入的驗證碼內(nèi)容。主流程之外的需求: 輸入框內(nèi)只能輸入數(shù)字類型，不能輸入字母，若強制輸入非數(shù)字類型按下撤回鍵時候輸入的驗證碼置空并且把當前焦點跳轉(zhuǎn)至第一個輸入框。
2.完整代碼實現(xiàn)。
大致思路就是頁面加載的時候，給第一個輸入框添加 autofocus 屬性，讓其自動獲取焦點，然后監(jiān)聽鍵盤點擊事件，當鍵盤按下的時候，判斷當前按鍵是否是數(shù)字按鍵，若不是，則當前輸入框置空，焦點還在當前輸入框，若為數(shù)字，則判斷前面的輸入框是否有數(shù)字存在，若不存在，則把焦點跳轉(zhuǎn)到前面空的一個輸入框，否則當前輸入框輸入，并且焦點移至下一個輸入框，焦點通過輸入框的一個偽類實現(xiàn)，當輸入長度為為4時候，將每個輸入框數(shù)字拼接成字符串通過彈框提示。
<!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;
/* 這里注意修改默認外邊框?qū)傩?不用border*/
outline: 1px solid black;
}
input:focus {
outline: 2px solid #3494fe;
}
</style>
</head>
<body>
<div class="check-div">
<h1>請輸入驗證碼</h1>
<div class="input-div">
<input
type="text"
class="inputItem0"
data-index="0"
maxlength="1"
autofocus
/>
<input type="text" class="inputItem1" data-index="1" maxlength="1" />
<input type="text" class="inputItem2" data-index="2" maxlength="1" />
<input type="text" class="inputItem3" data-index="3" maxlength="1" />
</div>
</div>
<script>
var inputArr = document.getElementsByTagName("input");
window.addEventListener("keyup", (e) => {
let curIndex = e.target.getAttribute("data-index"); //獲取當前輸入的下標
//如果點擊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ù)組的值拼接成驗證碼字符串
var str = "";
for (let j = 0; j <= 3; j++) {
console.log(inputArr[j].value);
str += inputArr[j].value;
}
var nextIndex = Number(curIndex) + 1;
//判斷沒有屬夠四位驗證碼的時候
if (curIndex < 3 && str.length < 4) {
for (let i = 0; i <= curIndex; i++) {
// 判斷之前的是否有空即沒輸入的情況，存在則把焦點調(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("提交的驗證碼是" + str);
//輸入了四位驗證碼的時候可以發(fā)送驗證碼請求等等
}
});
</script>
</body>
</html>
總結(jié)
到此這篇關于手動實現(xiàn)js短信驗證碼輸入框的文章就介紹到這了,更多相關js短信驗證碼輸入框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
實用又漂亮的BootstrapValidator表單驗證插件
這篇文章主要為大家詳細介紹了好用又漂亮的BootstrapValidator表單驗證插件，感興趣的小伙伴們可以參考一下2016-05-05
本文主要介紹了關于小程序網(wǎng)絡請求的封裝的相關資料。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
javascript+HTML5 canvas繪制時鐘功能示例
這篇文章主要介紹了javascript+HTML5 canvas繪制時鐘功能,結(jié)合實例形式分析了javascript+HTML5 canvas數(shù)值運算、圖形繪制與時間顯示相關操作技巧,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了javascript原型模式用法,以實例形式較為詳細的分析了javascript原型模式的原理與使用技巧,需要的朋友可以參考下2015-06-06
這篇文章主要給大家簡單介紹了JavaScript聲明變量名的語法規(guī)則，非常有助于大家學習javascript，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要介紹了jscript讀寫二進制文件的方法,涉及javascript中ActiveXObject對象的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了JavaScript 如何在瀏覽器中使用攝像頭，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了BootStrap創(chuàng)建響應式導航條實例代碼的相關資料,需要的朋友可以參考下2016-05-05
ES5 模擬 ES6 的 Symbol 實現(xiàn)私有成員功能示例
這篇文章主要介紹了ES5 模擬 ES6 的 Symbol 實現(xiàn)私有成員功能,結(jié)合實例形式分析了ES5 模擬 ES6 的 Symbol 實現(xiàn)私有成員功能相關原理、實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2020-05-05
JS實現(xiàn)獲取時間已經(jīng)時間與時間戳轉(zhuǎn)換
這篇文章主要為大家提供了用JavaScript編寫的獲取時間的類，以及時間戳轉(zhuǎn)時間的三種格式，文中的示例代碼講解詳細，感興趣的可以了解一下2022-03-03