手動でjsショートメッセージの検証コードの入力ボックスを実現します。
前言
本文は自分で手動で実現した一つの先端によくあるショートメッセージ認証コード入力コンポーネントを記録して、需要から段階的に最適化するプロセスを実現します。
本文
1.需要分析
まず効果図を見ます。
まずページローディングの場合、入力ボックスはフォーカスを取得し、ユーザーが数字を入力すると、フォーカスは自動的に第二のブロックにジャンプし、4つのボックスが全部入力されると、アナログで提出要求を送信します。ここでは1つのボックスヒントを使って入力の検証コードの内容を出力します。主流以外の需要：入力ボックスには数字タイプしか入力できません。アルファベットは入力できません。非数字タイプを強制的に入力してキャンセルキーを押すと、入力された認証コードが空になり、現在のフォーカスを最初の入力ボックスにジャンプします。
2.完全コード実現。
大体の考えはページローディングの時に、最初の入力枠にautfocus属性を追加して、自動的にフォーカスを取得して、キーボードをモニターしてイベントをクリックします。キーボードを押すと、現在のキーが数字ボタンかどうかを判断します。もしそうでないと、現在の入力枠は空になります。前の入力ボックスに数字が存在するかどうかを判断し、存在しない場合は、前の空の入力ボックスにフォーカスを移動します。そうでないと、現在の入力ボックスに入力し、次の入力ボックスにフォーカスを移動します。入力ボックスの疑似クラスにフォーカスを合わせて実現します。入力長さが4の場合は、各入力枠の数字を文字列につづり合わせて、ボックスにヒントを与えます。
ここでは、手動でjsショートメールの検証コードの入力ボックスを実現するには、この記事を紹介します。jsショートメールの検証コードの入力ボックスの内容については、以前の文章を検索したり、下記の関連記事を引き続き閲覧したりしてください。これからもよろしくお願いします。
本文は自分で手動で実現した一つの先端によくあるショートメッセージ認証コード入力コンポーネントを記録して、需要から段階的に最適化するプロセスを実現します。
本文
1.需要分析
まず効果図を見ます。
まずページローディングの場合、入力ボックスはフォーカスを取得し、ユーザーが数字を入力すると、フォーカスは自動的に第二のブロックにジャンプし、4つのボックスが全部入力されると、アナログで提出要求を送信します。ここでは1つのボックスヒントを使って入力の検証コードの内容を出力します。主流以外の需要：入力ボックスには数字タイプしか入力できません。アルファベットは入力できません。非数字タイプを強制的に入力してキャンセルキーを押すと、入力された認証コードが空になり、現在のフォーカスを最初の入力ボックスにジャンプします。
2.完全コード実現。
大体の考えはページローディングの時に、最初の入力枠にautfocus属性を追加して、自動的にフォーカスを取得して、キーボードをモニターしてイベントをクリックします。キーボードを押すと、現在のキーが数字ボタンかどうかを判断します。もしそうでないと、現在の入力枠は空になります。前の入力ボックスに数字が存在するかどうかを判断し、存在しない場合は、前の空の入力ボックスにフォーカスを移動します。そうでないと、現在の入力ボックスに入力し、次の入力ボックスにフォーカスを移動します。入力ボックスの疑似クラスにフォーカスを合わせて実現します。入力長さが4の場合は、各入力枠の数字を文字列につづり合わせて、ボックスにヒントを与えます。
<!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;
/* , 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);
//
if (!(e.keyCode >= 48 && e.keyCode <= 57)) {
console.log(1111111111);
inputArr[curIndex].value = "";
return false;
}
//
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++) {
// ， ， ，
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);
//
}
});
</script>
</body>
</html>ここでは、手動でjsショートメールの検証コードの入力ボックスを実現するには、この記事を紹介します。jsショートメールの検証コードの入力ボックスの内容については、以前の文章を検索したり、下記の関連記事を引き続き閲覧したりしてください。これからもよろしくお願いします。