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 条件の違いの紹介

推薦する

Hadoopカウンターとデータクリーニングの適用

データクリーニング (ETL)コアビジネスの MapReduce プログラムを実行する前に、まずデー...

Windows で IP アドレスを指定してサーバーへのリモート アクセスを設定する方法

当社には、外部ネットワークからの干渉を受けることが多いサーバーが多数あります。侵入者はポート 338...

MySQL 5.7 のスロークエリログの時間がシステム時間より 8 時間遅れている理由の詳細な説明

遅いクエリをチェックすると、時間が正しくなく、システム時間とちょうど 8 時間異なっていることがわか...

ドメイン名を指定されたポートに転送するようにNginxを設定する方法

/usr/local/nginx/conf と入力する sudo cd /usr/local/ngi...

Dockerコンテナを作成、起動、停止する方法

1. コンテナとは、独立して実行されるアプリケーション、またはアプリケーションのグループとその動作環...

Linux は suid vim.basic ファイルを使用して権限昇格を実現します。

カリで再現まず、必要なvim.basicファイルにsuid権限を設定します。 chmod u+s /...

Webサービスのリモートデバッグとタイムアウト動作原理の分析

Webサービスのリモートデバッグ.NET では、WEBSERVICE のリモート デバッグ機能はデフ...

getdata テーブル テーブル データ 結合 mysql メソッド

パブリック関数 json_product_list($where, $order){ グローバル ...

React.Childrenの詳しい使い方

目次1. React.Children.map 2. React.Children.forEach ...

閲覧時に作成されたWebページの下部にある余分な空白スペースを削除する方法

Dreamweaver または FrontPage を使用して HTML Web ページを作成する場...

MySQL で datetime 型のデフォルト値を設定する方法

Navicat クライアントを通じてデフォルトの日時値を変更する際に問題が発生しました。データベース...

SQLクエリの実行順序をゼロから学ぶ

SQL クエリ ステートメントの実行順序は次のとおりです。 (7)選択 (8) DISTINCT &...

mysql-connector-java8.0.27 へのアップグレードに関する注意事項

最近、オンライン セキュリティ スキャンにより、MySQL コネクタに脆弱性が見つかりました。確認し...

コンテナDockerCommitを介してイメージを送信し、DockerPushでイメージをプッシュします。

ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを D...

JS ベースの Ajax 同時リクエスト制御を実装する方法

目次序文Ajax シリアルおよびパラレルAjaxの同時リクエスト制御のための2つのソリューションPr...