js SMS認証コード入力ボックスを手動で実装する

js SMS認証コード入力ボックスを手動で実装する

序文

この記事では、私が手動で実装したフロントエンドの一般的な 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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JS 検証入力ボックス (文字、数字、記号、中国語)
  • JavaScript 入力ボックスのコンテンツ形式検証コード

<<:  Zabbix 監視ソリューション - 最新の公式バージョン 4.4 [推奨]

>>:  MySQL の左結合操作における on 条件と where 条件の違いの紹介

推薦する

Tomcatのクラスロードメカニズムを説明する記事

目次- 序文 - - JVM クラスローダー - 1. JVMクラスローダー2. クラスローダーのソ...

タグのhref属性とonclickイベントの使用例

a タグは主にページ ジャンプを実装するために使用され、これは href 属性または onclick...

数千万データを持つMySQLテーブルを最適化する実践記録

序文まずここで説明させてください。インターネット上では、Alibaba では 500 万のデータを異...

MySQL における datetime と timestamp の違いと選択

目次1 違い1.1 スペース占有1.2 表現範囲1.3 タイムゾーン2 テスト3つの選択肢MySQL...

Vue+nodeはオーディオ録音・再生機能を実現

結果: コードロジックを実装するのが主な部分であり、具体的なページ構造を一つ一つ紹介することはありま...

Vue3 を使用してアップロード コンポーネントを実装するためのサンプル コード

目次一般的なアップロードコンポーネントの開発以下の機能を実装する必要がありますカスタムテンプレートサ...

実行中の時計を実装するための純粋な CSS3 コード

操作効果コードの実装html <div id="ウォッチ"> <...

WeChat アプレットの日付と時刻のコンポーネント (年、月、日、時間、分)

この記事の例では、WeChatアプレットの日付と時刻コンポーネントの具体的なコードを参考までに共有し...

ノード スキャフォールディングを使用してトークン検証を実装するサーバーを構築する方法

コンテンツスキャフォールディングを使用してノードプロジェクトを素早く構築するデータベースとやり取りす...

CSS グラデーション効果の概要 (線形グラデーションと放射状グラデーション)

線形グラデーション 背景画像: linear-gradient(方向、開始色、中間色1、中間色2、....

...

Dockerコンテナとローカルマシン間でファイルを転送する方法

ホストとコンテナ間でファイルを転送するには、コンテナの完全な ID が必要です。取得方法は以下の通り...

Linux Crontab シェル スクリプトを使用して第 2 レベルのスケジュールされたタスクを実装する方法

1. シェルスクリプトcrontab.shを書く #!/bin/bash step=1 #ステップ間...

Vue3 のリアクティブ関数 toRef 関数 ref 関数の紹介

目次リアクティブ機能使用法: toRef 関数 (理解するだけ)使用法: ref関数レスポンシブデー...

効果的なウェブフォームのための 8 つのルール

ユーザーから情報を収集する場合、Web フォームを使用するより簡単で直接的な方法はありません。適切に...