JavaScriptは、フォームテキストフィールドでの携帯電話番号の自動フィルタリングとカウントを実装しています

この構造で：

• Mobilenoは、携帯電話番号を入力するために使用されるテキストフィールドです。
• NumberCountは、有効な携帯電話番号の数を表示する読み取り専用の入力ボックスです。

2。JavaScriptは、番号のフィルタリングとカウントを実装します

コアロジックはJavaScriptにあります。テキストフィールドでの入力イベントをリッスンし、ユーザーがコンテンツに入ったり貼り付けたりするときにすぐにフィルタリングとカウント操作を実行します。

 
    document.addeventlistener（ 'domcontentloaded'、function（）{
        const mobilenumberstextarea = document.queryselector（ '＃mobileno'）;
        const numbercountinput = document.queryselector（ '＃numbercount'）;

        /**
         *テキストフィールドコンテンツを処理し、10純数の数値をフィルターし、カウントを更新*/
        function processmobilenumbers（）{
            let rawinput = mobilenumberstextarea.value;
            //行によって分割され、空の行をフィルタリングします。LETLET LET LET LET rawInput.Split（ '\ n'）。マップ（line => line.trim（））。フィルター（line => line！== ''）;

            leb validnumbers = [];
            const tendigitnumberregex = /^\ d {10} $ /; //正確な10桁の数字の行を一致させます。Foreach（num => {
                if（tendigitnumbumberregex.test（num））{
                    validnumbers.push（num）;
                }
            }）;

            //重複した有効な数値を削除します（オプションですが、推奨）
            const siquevalidnumbers = [... new set（validnumbers）];

            //テキストフィールドコンテンツを更新すると、有効な数字のみが保持され、1つのmobilenumberstextarea.value = uniquevalidnumbers.join（ '\ n'）;
            //番号count numbercountinput.value = uniquevalidnumbers.length;
        }

        //入力イベントを聞いてリアルタイム処理を実現する//入力イベントは、MobilEnumberStextarea.addeventListener（ 'input'、processMobilenumbers）をトリガーします。

        //ページがロードされたときに1回実行して初期コンテンツを処理します（テキストフィールドにプリセット値がある場合）
        ProcessMobilenumbers（）;
    }）;

3。コアロジックの詳細な説明

1. DOM要素の取得：最初に、DOMはテキストフィールド（#mobileno）とカウント入力ボックス（#NumberCount）への参照がdocument.querySelectorを介して取得されます。
2. ProcessMobileNumbers関数：これはコア処理機能であり、次のタスクに責任があります。
   • 元の入力を取得：mobilenumberstextarea.valueは、テキストフィールドの現在のコンテンツを取得します。
   • 分割してきれいにライン：rawinput.split（ '\ n'）は、コンテンツをラインブレークごとに配列に分割します。 map（line => line.trim（））は、各ラインの開始スペースと終了スペースを削除します。フィルター（line => line！== ''）処理された空白行を削除します。
   • 正規表現の検証：const tendigitnumberregex = /^\ d {10} $ /;正規表現を定義します。
     • ^文字列の始まりを一致させます。
     • \ d任意の数（0-9）に一致します。
     • {10}は、前の要素を10回正確に一致させます。
     • $は文字列の端を一致させます。この正規表現は、数値が10桁である必要があり、わずか10桁であり、他の文字（スペース、標識など）が含まれていないことを保証します。
   • フィルター有効な数字：各行を通過し、tendigitnumberregex.test（num）を使用して、行が10桁の形式を満たしているかどうかを確認します。基準を満たす数値は、validNumbersアレイに追加されます。
   • 重複排除処理（推奨） ：[... new set（validnumbers）]は簡潔なJavaScriptの構文であり、validNumbersアレイにすべての非重複要素を含む新しい配列を作成します。これにより、ユーザーが重複した数値を貼り付けたときに繰り返されるカウントを回避できます。
   • テキストフィールドの更新：mobilenumberstextarea.value = uniquevalidnumbers.join（ '\ n'）;フィルタリングと重複排除後の有効な数字をラインブレークで接続し、テキストフィールドをリセットするため、形式に準拠していない数値を自動的にクリーニングします。
   • 更新カウント：numbercountinput.value = uniquevalidnumbers.length;有効な番号配列の長さをカウント入力ボックスに更新します。
3. イベントリスニング：mobilenumberstextarea.addeventlistener（ 'input'、processmobilenumbers）; ProcessMobileNumbers関数をテキストフィールドの入力イベントにバインドします。これは、テキストフィールドのコンテンツが変更されるたびに（ユーザータイピング、削除、または貼り付けであるかどうかにかかわらず）、機能がすぐに実行され、リアルタイムのフィードバックが可能になることを意味します。
4. 初期化処理：ProcessMobileNumbers（）;テキストフィールドがHTMLでプリセットされた値を持っている場合に備えて、ページがロードされた直後に1回実行され、初期状態の正しいカウントとクリーニングが保証されます。

4.予防策と最適化

• イベントの選択：
  • 入力イベントは、テキストドメインコンテンツの変更を処理するための最良の選択です。ユーザー入力、貼り付け、カット、ドラッグ、ドロップなどのコンテンツを変更するさまざまな方法をカバーし、リアルタイムのユーザーエクスペリエンスを提供します。
  • キーアップイベントは、キーがリリースされた場合にのみトリガーされ、貼り付けなどのキーボード操作をキャプチャできません。
  • マウスアウトイベント（質問に対する元の回答に示されているように）は、マウスが要素から移動するとトリガーされます。これにより、ユーザーがマウスをテキストフィールドから移動して結果を確認する必要があり、推奨されないため、ユーザーエクスペリエンスが低下する可能性があります。
  • ペーストイベントは、ペースト操作のために特別に処理できますが、通常は入力イベントで十分です。
• 正規表現： ^\ d {10} $は、非常に正確な10ビットの純粋な数値マッチです。国際ドメインコードまたはより複雑な携帯電話番号形式をサポートする必要がある場合は、正規表現を調整する必要があります。たとえば、数字から始めて数字が続く場合は、より複雑なルールが必要です。
• ユーザーエクスペリエンス：リアルタイムのクリーニングとカウントは、ユーザーエクスペリエンスを大幅に改善できます。ユーザーは、どの数値が有効で、どの数値が削除されているかを即座に確認できます。
• サーバー側の検証：フロントエンド検証は優れたユーザーエクスペリエンスを提供しますが、サーバー側で再度確認してください。フロントエンドの検証は簡単にバイパスされ、サーバー側の検証は、データセキュリティと整合性のための最後の防衛線です。
• エラーのヒント：より複雑なアプリケーションでは、無効な番号が削除されたときに視覚的なフィードバックまたはプロンプトをユーザーに提供することを検討できます。

上記の方法により、テキストフィールドのユーザーが入力した携帯電話番号を効率的に管理および検証し、データの正確性を確保し、ユーザーエクスペリエンス全体を改善できます。