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

推薦する

JSのバイナリファミリーについての簡単な説明

目次概要ブロブBlob の動作BLOB ダウンロード ファイルブロブ画像のローカル表示BLOB ファ...

MySQL の count()、group by、order by の詳細な説明

最近、IM を実行するときに、これらの 3 つのキーワードを同時に使用したときに問題が発生しました。...

追加、削除、変更、クエリを実行するための JS 操作オブジェクト配列のサンプルコード

1. はじめに最近、私は友人が JSON 配列を追加、削除、変更するための簡単なページを作成するのを...

MySQLで更新可能なビューを作成する方法の詳細な説明

この記事では、例を使用して、MySQL で更新可能なビューを作成する方法について説明します。ご参考ま...

MySQL データベースの操作とデータ型

目次1. データベース操作1.1 データベースの表示1.2 データベースを作成する1.3 データベー...

高性能な HTML アプリケーションを作成するためのヒント

Web ページのパフォーマンスを向上させるにはどうすればよいでしょうか?ほとんどの開発者は、Java...

HTML要素のID属性とName属性の違い

今日、私は <a href="#13"></a> につい...

HTMLファイル内の中国語の文字化けとブラウザでの表示の問題

今日も私のページが文字化けしていたので、インターネットで関連する問題を検索しました。この方法はかなり...

JavaScript データ型の詳細な説明

目次1. リテラル1.1 数値リテラル1.2 浮動小数点リテラル1.3 特別な値1.4 文字列リテラ...

CSS スタイルにおける中国語フォントのフォントファミリーに対応する英語名の詳細な説明

ソングティ: SimSun太字: SimHeiマイクロソフト YaHei: マイクロソフト YaHe...

js を使用してウォーターフォール効果を実現する

この記事の例では、滝の流れの効果を実現するためのjsの具体的なコードを参考までに共有しています。具体...

Docker で nginx の https を設定する方法

https をサポートしていない Web サイトは、ブラウザによって徐々に安全でないとマークされるた...

JavaScriptは組み込みオブジェクトのプロトタイプメソッド実装を追加します

オブジェクトがメソッドを呼び出す順序:インスタンス内にメソッドが存在しない場合は、インスタンス オブ...

CentOS7にNginxをインストールして自動起動を設定する方法

1.公式サイトからインストールパッケージをダウンロードするhttp://nginx.org/en/d...

MySQL をデプロイするときに発生する「テーブル mysql.plugin が存在しません」という問題の解決方法

今日、MySQL の無料インストール版をデプロイしたところ、テーブル 'mysql.plug...