序文この記事では、私が手動で実装したフロントエンドの一般的な 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 条件の違いの紹介
データクリーニング (ETL)コアビジネスの MapReduce プログラムを実行する前に、まずデー...
当社には、外部ネットワークからの干渉を受けることが多いサーバーが多数あります。侵入者はポート 338...
遅いクエリをチェックすると、時間が正しくなく、システム時間とちょうど 8 時間異なっていることがわか...
/usr/local/nginx/conf と入力する sudo cd /usr/local/ngi...
1. コンテナとは、独立して実行されるアプリケーション、またはアプリケーションのグループとその動作環...
カリで再現まず、必要なvim.basicファイルにsuid権限を設定します。 chmod u+s /...
Webサービスのリモートデバッグ.NET では、WEBSERVICE のリモート デバッグ機能はデフ...
パブリック関数 json_product_list($where, $order){ グローバル ...
目次1. React.Children.map 2. React.Children.forEach ...
Dreamweaver または FrontPage を使用して HTML Web ページを作成する場...
Navicat クライアントを通じてデフォルトの日時値を変更する際に問題が発生しました。データベース...
SQL クエリ ステートメントの実行順序は次のとおりです。 (7)選択 (8) DISTINCT &...
最近、オンライン セキュリティ スキャンにより、MySQL コネクタに脆弱性が見つかりました。確認し...
ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを D...
目次序文Ajax シリアルおよびパラレルAjaxの同時リクエスト制御のための2つのソリューションPr...