序文この記事では、私が手動で実装したフロントエンドの一般的な SMS 認証コード入力コンポーネントと、要求から実装までの段階的な最適化のプロセスを記録します。 文章1. 需要分析 まずはレンダリングを見てみましょう。 まず、ページが読み込まれると、入力ボックスにフォーカスが置かれます。ユーザーが数字を入力すると、フォーカスは自動的に 2 番目のボックスにジャンプします。4 つのボックスすべてに入力すると、送信要求がシミュレートされます。ここでは、ポップアップ ボックス プロンプトを使用して、入力検証コードの内容を出力します。メインプロセス外の要件: 入力ボックスには数字のみ入力でき、文字は入力できません。数字以外のタイプを強制的に入力すると、引き出しキーを押したときに入力した確認コードがクリアされ、現在のフォーカスが最初の入力ボックスにジャンプします。 2. コードの実装を完了します。 基本的な考え方は、ページがロードされたら、最初の入力ボックスに autofocus 属性を追加して自動的にフォーカスを取得し、キーボードのクリック イベントをリッスンすることです。キーボードが押されたら、現在のキーが数字キーかどうかを判断します。数字キーでない場合は、現在の入力ボックスが空に設定され、フォーカスは現在の入力ボックスに残っています。数字の場合は、前の入力ボックスに数字があるかどうかを判断します。数字がない場合は、フォーカスを前の空の入力ボックスにジャンプします。数字がない場合は、現在の入力ボックスに入り、フォーカスを次の入力ボックスに移動します。フォーカスは、入力ボックスの疑似クラスを通じて実装されます。入力長が 4 の場合、各入力ボックスの数字は文字列に連結され、ポップアップ ボックスを通じてプロンプトが表示されます。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8" /> <meta http-equiv="X-UA-compatible" content="IE=edge" /> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" /> <title>ドキュメント</title> <スタイル> .チェックdiv{ 幅: 400ピクセル; 高さ: 600px; マージン: 100px 自動; 境界線: 1px 実線スレートグレー; テキスト配置: 中央; } h1 { フォントサイズ: 24px; } .input-div { 上マージン: 100px; } 入力{ 左マージン: 5px; テキスト配置: 中央; 幅: 50px; 高さ: 50px; 境界線: なし; /* デフォルトの外側の境界線属性は、ここでは境界線なしで変更する必要があることに注意してください*/ アウトライン: 1px 黒 } 入力:フォーカス{ アウトライン: 2px 実線 #3494fe; } </スタイル> </head> <本文> <div class="check-div"> <h1>認証コードを入力してください</h1> <div class="input-div"> <入力 タイプ="テキスト" クラス="inputItem0" データインデックス="0" 最大長="1" オートフォーカス /> <input type="text" class="inputItem1" データインデックス="1" 最大長="1" /> <input type="text" class="inputItem2" data-index="2" maxlength="1" /> <input type="text" class="inputItem3" データインデックス="3" 最大長="1" /> </div> </div> <スクリプト> var inputArr = document.getElementsByTagName("input"); window.addEventListener("keyup", (e) => { let curIndex = e.target.getAttribute("data-index"); //現在の入力のインデックスを取得します //BackSpaceをクリックすると、ここですべて削除されます if (e && e.keyCode == 8) { コンソールログ(22222222222); (j = 0; j <= 3; j++) の場合 { inputArr[j].value = ""; 入力Arr[0].focus(); } 戻る; } console.log("e.keyCode", e.keyCode); //入力が数値でない場合if (!(e.keyCode >= 48 && e.keyCode <= 57)) { コンソールログ(1111111111); inputArr[curIndex].value = ""; false を返します。 } //配列の値を走査し、検証コード文字列に連結します。var str = ""; (j = 0; j <= 3; j++) の場合 { console.log(inputArr[j].value); str += inputArr[j].値; } var nextIndex = Number(curIndex) + 1; //4桁の検証コードが足りないと判断した場合 if (curIndex < 3 && str.length < 4) { (i = 0; i <= curIndex; i++) の場合 { // 前のものが空かどうかをチェックし、空の場合はフォーカスを最前面に調整して入力を最前面に戻し、そうでない場合は次のものにジャンプします。if (!inputArr[i].value) { 入力Arr[現在のインデックス].blur(); inputArr[i].value = inputArr[curIndex].value; var インデックス = i + 1; inputArr[インデックス].focus(); inputArr[curIndex].value = ""; 戻る; } それ以外 { var nextIndex = Number(curIndex) + 1; 入力Arr[次のインデックス].focus(); } } } それ以外 { alert("送信された確認コードは " + str です); //4桁の確認コードを入力すると、確認コードリクエストが送信されるなど。} }); </スクリプト> </本文> </html> 要約するjs SMS 認証コード入力ボックスを手動で実装する方法に関するこの記事はこれで終わりです。より関連性の高い js SMS 認証コード入力ボックスのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Zabbix 監視ソリューション - 最新の公式バージョン 4.4 [推奨]
>>: MySQL の左結合操作における on 条件と where 条件の違いの紹介
目次MySQL を使い始めるMySQL 管理6. MySQL サーバーを起動および停止します。 7....
macにbrewを使ってphp56をインストールしたところ、 opensslがバージョン1.1だった...
CSS を使用する場合は、DOCTYPE (ドキュメント タイプ定義) を記述することを忘れないでく...
検索パフォーマンスは最速から最遅まで次のとおりです (私が聞いたところによると)。 1 番目: ti...
vue2 では、タイムスタンプを変換するときに、通常はフィルターを使用します。vue3 以降では、...
Nginx は、高性能な Web サイト サーバーおよびリバース プロキシ サーバーであり、IMAP...
MySQL をインストールした後、初めてmysql -uroot -pを実行したときに、root パ...
この記事では、jQueryタグセレクターアプリケーションの具体的なコードを例として紹介します。具体的...
hk_test(ユーザー名、パスワード) に値を挿入 ('qmf1', '...
ウェブページに表示されるプレーヤーは、WMP/RealPlayer/Flash Player に過ぎ...
<本文> <div id="ルート"> <h2&...
シナリオ: ページAがページBを開くと、ページBで操作した後、ページAは変更されたデータを同期する必...
関数0. 現在の時刻を表示するコマンド: select now()。機能: 現在の時刻を表示します。...
1. ディスクパーティション: 2. fdiskパーティションディスクが2 TB未満の場合はfdis...
序文mysql モジュール (プロジェクト アドレスは https://github.com/mys...