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

推薦する

mysql 5.7.5 m15 winx64.zip インストール チュートリアル

win7 64 ビットで mysql-5.7.5-m15-winx64 をインストールして構成する方...

mysql5.7.19 zip 詳細なインストールプロセスと構成

MySQL v5.7.19 正式版(32/64 ビットインストール版および zip 解凍版) 1. ...

Linux 上の MYSQL 5.7 でルート パスワードを取得する際の問題 (テスト済み、利用可能)

目次1. --skip-grant-tables 経由で取得する1.1 my.conf を変更し、新...

MySQL ツリー構造データベース テーブル設計

目次序文1. 基本データ2. 継承駆動設計3. 左右の値のエンコーディングに基づく設計4. ツリー構...

Linux 面接で最もよく聞かれる 10 の質問のまとめ

序文Linux システムの運用および保守エンジニア職の面接を受ける場合は、次の 10 個の最も一般的...

Vue で動的なスタイルを実現するためのさまざまな方法のまとめ

目次1. 三項演算子の判定2. 動的に設定されるクラス3. 方法判定4. 配列バインディング5. e...

Ubuntu 20.04にvncserverをインストールする方法

Ubuntu 20.04は2020年4月に正式にリリースされました。本日、ミラーシステムを正式にイン...

HTML Webページの例を使用してヘッドエリアコードの意味を説明する

例を使って、Webページのヘッダー情報の意味を理解しましょう。 <!DOCTYPE HTML ...

Docker プライベートリポジトリの管理とローカルリポジトリ内のイメージの削除

1: Dockerプライベートウェアハウスのインストール1. イメージリポジトリからイメージをダウン...

Vue+element+springboot でファイルダウンロードの進行状況バー表示機能を実装する例

目次1. 需要背景2. 最適化計画3. 具体的な実施3.1 フロントエンドコード3.2 背景コード4...

スライダー検証コードを実装するJavaScript

この記事では、スライダー検証コードを実装するためのJavaScriptの具体的なコードを参考までに共...

MySQL 8.0 でのチェック制約の実装

みなさんこんにちは。私は技術の話ばかりして髪を切らない先生のトニーです。今回はMySQL 8.0で追...

MySQL のインデックスとデータ テーブルを管理する方法

目次テーブルの競合を見つけて修正するインデックス統計の更新テーブルの競合を見つけて修正するデータ テ...

MySQL 整合性制約の定義と例のチュートリアル

目次整合性制約整合性制約の定義整合性制約の分類主キー制約単一の主キーと複合主キーの違い主キーフィール...

MySQL インデックスの失敗を引き起こす一般的な書き込み方法の概要

序文最近、古いプロジェクトから残ったいくつかの SQL 最適化の問題に対処するのに忙しくしています。...