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

推薦する

1時間で学ぶMySQLの基礎

目次MySQL を使い始めるMySQL 管理6. MySQL サーバーを起動および停止します。 7....

docker に php-fpm サービス/拡張機能/構成をインストールする詳細なチュートリアル

macにbrewを使ってphp56をインストールしたところ、 opensslがバージョン1.1だった...

CSS (カスケーディング スタイル シート) の一般的な用語の概要

CSS を使用する場合は、DOCTYPE (ドキュメント タイプ定義) を記述することを忘れないでく...

MySQLストレージフィールドタイプのクエリ効率についての簡単な理解

検索パフォーマンスは最速から最遅まで次のとおりです (私が聞いたところによると)。 1 番目: ti...

vue3 タイムスタンプ変換 (フィルターを使用せずに)

vue2 では、タイムスタンプを変換するときに、通常はフィルターを使用します。vue3 以降では、...

https ウェブサイトを展開し、Nginx でアドレス書き換えを構成するための詳細な手順

Nginx は、高性能な Web サイト サーバーおよびリバース プロキシ サーバーであり、IMAP...

jQuery タグセレクターの適用例の詳細な説明

この記事では、jQueryタグセレクターアプリケーションの具体的なコードを例として紹介します。具体的...

MySQLテーブル内の重複データをクエリする方法

hk_test(ユーザー名、パスワード) に値を挿入 ('qmf1', '...

複数の古いプレーヤーの埋め込みコード

ウェブページに表示されるプレーヤーは、WMP/RealPlayer/Flash Player に過ぎ...

Vueコンポーネントの詳細な説明

<本文> <div id="ルート"> <h2&...

js を使用して 2 つの HTML ウィンドウ間で通信する方法

シナリオ: ページAがページBを開くと、ページBで操作した後、ページAは変更されたデータを同期する必...

便利でシンプルなMySQL関数10個

関数0. 現在の時刻を表示するコマンド: select now()。機能: 現在の時刻を表示します。...

Linux の操作とメンテナンスの基本システムディスク管理チュートリアル

1. ディスクパーティション: 2. fdiskパーティションディスクが2 TB未満の場合はfdis...

Node.js mysqlクライアントが認証プロトコルをサポートしていない問題を解決する

序文mysql モジュール (プロジェクト アドレスは https://github.com/mys...