Skip to content

Instantly share code, notes, and snippets.

@edwardlorilla

edwardlorilla/index.html

Created June 8, 2021 16:17
Show Gist options
  • Save edwardlorilla/dc766ab877cbc534eff5fab25ffa7fb6 to your computer and use it in GitHub Desktop.
Save edwardlorilla/dc766ab877cbc534eff5fab25ffa7fb6 to your computer and use it in GitHub Desktop.
Download ZIP
SMS verification code input box
Raw
index.html
<div id="app">
<div class="check-div">
<h1>Please enter the verification code</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>
</div>
Raw
script.js
var inputArr = document.getElementsByTagName("input");
window.addEventListener("keyup", (e) => {
let curIndex = e.target.getAttribute("data-index"); //Get the index of the current input
//If you click BackSpace to delete, delete all here
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);
//If the input is not a number
if (!(e.keyCode >= 48 && e.keyCode <= 57)) {
console.log(1111111111);
inputArr[curIndex].value = "";
return false;
}
//The value of the traversal array is spliced ​​into a verification code string
var str = "";
for (let j = 0; j <= 3; j++) {
console.log(inputArr[j].value);
str += inputArr[j].value;
}
var nextIndex = Number(curIndex) + 1;
//When it is judged that there is not enough four-digit verification code
if (curIndex <3 && str.length <4) {
for (let i = 0; i <= curIndex; i++) {
// Judge whether the previous one is free or there is no input, if it exists, adjust the focus to the front, and give the back of the input to the front one, otherwise skip to the next one
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("The verification code submitted is" + str);
//You can send a verification code request when you enter the four-digit verification code, etc.
}
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.2/index.js"></script>
Raw
style.css
.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;
/* Here pay attention to modify the default outer border properties, without border*/
outline: 1px solid black;
}
input:focus {
outline: 2px solid #3494fe;
}
Raw
styles
<link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment