フォームに電話番号を入力する方法。 jQuery を使用して電話フィールドをマスクおよび検証します。 HTML入力マスクの作成

この jQuery プラグインを使用すると、入力された電話番号の先頭に基づいて適切な入力マスクを自動的に選択できます。これにより、Web サイトのページで電話番号をより速く入力し、エラーをなくすことができます。さらに、入力ルールを複数の入力マスクの形式で表現できれば、開発したプラグインを他の分野でも使用できます。

はじめに Web サイトでは電話番号情報の入力が必要です。たまたま、各国が独自のダイヤル規則と番号の長さを確立する権利を持っているため、異なる国の居住者の間で定期的に混乱が生じます。番号の先頭に 8 を付けることに慣れている人もいれば、先頭に 8 を付けることに慣れている人もいます。数字の 0、および + 記号が付いたその他の数字既存のソリューションを確認する何らかの方法で複雑さを解決し、数値を統一した形式にするために、主なソリューションが 3 つあります。

ユーザーは定型入力を使用して番号を入力するように求められます。利点: 数値が明確に表示されるため、数値のエラーが最小限に抑えられます。欠点: 各国には独自のスペルと数字の長さがあります。

ユーザーは国を個別に選択し、残りの番号を個別に入力するように求められます。入力マスクを使用すると可能です。利点: 国 (国内の地域だけでなく) ごとに異なる入力マスクを使用できること。欠点: 国 (および各国内の地域) のリストが膨大になる可能性があります。電話番号は単一の全体として存在しなくなります (または、番号を保存して表示する前に前処理が必要です)。

数値の前 (入力の外側) に + 記号を配置し、数値のみを入力できるようにします。利点: 導入が簡単。欠点: 数値が視覚的に表示されない。

提案された解決策その結果、通常の入力マスクを、現在の数値の値に応じて変化するように変更することにしました。さらに、番号を入力すると、識別された国の名前を表示するよう求められます。このアプローチは、主観的には、上記のソリューションの欠点をすべて解決するはずです。

世界の国の数が比較的少ないという事実を考慮して、すべての国を対象とした入力マスクのリストを作成することが決定されました。国際電気通信連合の Web サイトで公開されている情報が情報源として使用されました。

この情報を収集すると、多くの驚きがもたらされました。情報収集の過程では、国内を含め、電話番号のあらゆる選択肢を考慮する必要がありました。ただし、手動で処理された情報が大量にあるため、収集されたデータベースに不正確な部分が残る可能性があります。初期設定は時間をかけて修正していく予定です。

ソフトウェア実装 Habrahabr で何度も言及した jquery.inputmask 実装が、入力マスクのコアとして使用されました。このプラグインは現在積極的に開発されており、さらに、その拡張機能を非常に簡単に作成できるように設計されています。ただし、この問題では、そのような拡張機能を作成するのはほぼ不可能であることが判明しました。ニーズに合わせて元のプラグインを変更したり書き直したりしませんでした。その作成者は引き続き機能の拡張に積極的に取り組んでおり、その結果、私の編集内容の適用に問題が生じる可能性があります。したがって、外部の影響を監視 (さらに傍受) し、データを変更するプラグインアドオンをメインコア上に作成する必要がありました。メインプラグインのハンドラーの前に外部インフルエンスハンドラーを実装するために、jquery.bind-first ライブラリプラグインを使用しました。方法。並べ替えルールを開発する際には、次の規則が採用されました。

入力マスク内のすべての文字は、重要な文字 (私の場合、これは任意の数字を意味する # 記号と数字 0 ～ 9) と装飾文字 (その他すべて) の 2 つのタイプに分類されます。

入力マスク内の文字のもう 1 つの区分は、ワイルドカード文字 (この場合は # 記号) とその他すべてです。

その結果、適用された順序で並べ替えルールが次のようになります。

2 つの入力マスクを文字ごとに比較する場合、重要な文字 (デコレータではない) のみが考慮されます。

異なるワイルドカード文字は同等として扱われ、他の重要な文字はコードに基づいて比較されます。

非テンプレートシンボルは常にテンプレートシンボルよりも小さいため、結果として上位に配置されます。

入力マスク内の有効文字の長さが短いほど、入力マスクは小さいとみなされ、上位に配置されます。

適切な入力マスクの検索入力テキストとソートされたリストの次のマスクを比較する場合、各マスクの重要な文字のみが考慮されます。先行するすべての文字がテストに合格した場合でも、行が定型入力より長い場合、定型入力は無効とみなされます。入力テキストが複数の入力マスクと一致する場合、最初の入力マスクが返されます。次に、見つかったマスク内のすべての重要な文字 (テンプレート以外の文字を含む) が、テンプレートシンボルのいずれかで許可されているすべての文字の組み合わせであるテンプレートシンボルに置き換えられます。入力マスクのメインカーネルのイベントハンドラーでは、次のイベントがインターセプトされます。

keydown - バックスペースおよび削除キーストロークは、メインハンドラーがテキストから 1 文字を削除する前に、現在の入力マスクを変更するために監視されます。さらに、テキスト入力モードを変更する Insert キーの押下も同期を監視されます。
キーを押す - 入力された文字は元の入力マスクでは許可されない可能性があるため (その中のすべての重要な文字はワイルドカードに置き換えられるため)、許可されたマスクの 1 つを満たすために新しい行をチェックする必要があります。そのようなマスクがない場合、文字入力は破棄され、そうでない場合は入力マスクが更新され、その後イベントがカーネルハンドラーに渡されます。
past 、 input - クリップボードからテキストを貼り付けます。処理をカーネルに転送する前に、クリップボードからテキストを貼り付けた結果の文字列に対して入力マスクが選択されます。入力マスクが見つからない場合、テキストが少なくとも 1 つの入力マスクと一致するまで、テキストは末尾から 1 文字ずつトリミングされます。 val() 関数を呼び出して入力フィールド内のテキストを修正するとき、および空ではない入力フィールドに適用されている入力マスクを初期化するときにも、同様の操作が実行されます。
ドラッグドロップ、ドロップ - 処理はペーストイベントと似ています。
ブラー - 入力マスクを満たさない場合にフォーカスが失われたときにテキストクリアモードが有効になっている場合の追加処理。このイベントは、以前のイベントとは異なり、メインハンドラーの後にインターセプトされます。

すべてのイベントは、inputmask スペースでハングされます。これにより、アドインの初期化後に inputmask を呼び出すときの不正な動作が回避されます (初期化時にカーネルが inputmask 空間に以前にインストールされたハンドラーをすべて削除するため)。

使用例マスクリストの形式マスクリストは、オブジェクトの JavaScript 配列であり、同じプロパティセットを持つことが望ましいです。すべての配列オブジェクトには、入力マスクを含むプロパティが少なくとも 1 つ存在する必要があります。マスクを含むパラメータの名前は任意です。以下はそのような配列の一部です。
[ … ( "マスク": "+7(###)###-##-##", "cc": "RU", "name_en": "ロシア", "desc_en": "", " name_ru": "ロシア", "desc_ru": "" ), ( "mask": "+250(###)###-###", "cc": "RW", "name_en": "ルワンダ", "desc_en": "", "name_ru": "ルワンダ", "desc_ru": "" ), ( "マスク": "+966-5-####-####", "cc ": "SA", "name_en": "サウジアラビア", "desc_en": "モバイル", "name_ru": "サウジアラビア", "desc_ru": "モバイル" ), ( "マスク": "+966- #-###-####", "cc": "SA", "name_en": "サウジアラビア", "desc_en": "", "name_ru": "サウジアラビア", "desc_ru": " " ), … ] プラグイン接続パラメータ接続する前に、マスクのリストをロードして並べ替える必要があります。これは、次の関数を実行することで行われます。
$.masksSort = function(maskList, defs, match, key)

MaskList - 入力マスクを格納するオブジェクトの配列 (オブジェクトフラグメントは上記を参照)。
defs - ワイルドカード文字の配列 (私の場合は # 記号です)。
match - 重要な文字を記述する正規表現 (私の場合、これは /|#/)。
key は、入力マスクを含む配列オブジェクトパラメーターの名前です。

接続すると、プラグインにはその動作を説明する特別なオブジェクトが与えられます。このオブジェクトには、次のパラメータのセットが含まれています。

inputmask - メインの inputmask プラグインに渡されるパラメーターを含むオブジェクト。
match - ワイルドカードを除く、重要な文字を記述する正規表現。
replace - すべての重要な文字が置き換えられるワイルドカード文字。 inputmask オブジェクトの定義オブジェクトには存在しない可能性があります。
list - 入力マスクを記述するオブジェクトの配列。
listKey - 入力マスクを格納するオブジェクト内のパラメータの名前。
onMaskChange - 入力マスクが更新されたときに呼び出される関数。最初のパラメータは配列のオブジェクトで、その入力マスクは入力されたテキストに対応します。2 番目のパラメータはマスク定義の精度です。 true - 入力マスクは完全に一致します。 false - 確実に一致させるには追加の文字を入力する必要があります。マスクを定義します。

プラグインを初期化するには、入力フィールドに inputmasks メソッドを適用する必要があります。
$.fn.inputmasks = function(maskOpts, モード)

MaskOpts - プラグインの操作を記述するオブジェクト。
モード - オプション。現在、isCompleted 値がサポートされています。その結果、メソッドは、一致するマスクに対応するテキストが完全に入力された場合は true を返し、それ以外の場合は false を返します。

プラグイン接続例
入力マスク var MaskList = $.masksSort($.masksLoad("phone-codes.json"), ["#"], /|#/, "mask"); var MaskOpts = ( inputmask: ( 定義: ( "#": ( validator: "", カーディナリティ: 1 ) ), //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true ), match: //, replace: "# "、リスト：maskList、listKey：「マスク」、onMaskChange：function（maskObj、完了）（if（完了）（ varヒント = MaskObj.name_ru; if（maskObj.desc_ru && MaskObj.desc_ru != ""）（ヒント + = " (" + MaskObj.desc_ru + ")"; ) $("#descr").html(hint); ) else ( $("#descr").html("入力マスク"); ) $(this ).attr("プレースホルダー", $(this).inputmask("getemptymask")); ) ); $("#phone_mask").change(function() ( if ($("#phone_mask").is(":checked")) ( $("#customer_phone").inputmasks(maskOpts); ) else ( $ ("#customer_phone").inputmask("+[####################]", MaskOpts.inputmask) .attr("プレースホルダー", $("# customer_phone").inputmask("getemptymask")); $("#descr").html("入力マスク"); ) )); $("#phone_mask").change(); デモンストレーション開発したプラグインのデモンストレーションの例は、次の場所にあります。

一目見ただけで答えは明らかです。「電話番号」フィールドを必須としてマークします。しかし、不必要な必須フィールドが原因でユーザーがサイトを離れる可能性があるニッチな分野もあります。たとえば、アプリケーション、ソフトウェア、コンテンツを販売するサイトなどです。ただし、このようなプロジェクトのユーザー数は、将来の潜在的なクライアントとのやり取りを可能にする追加データとして重要です。さらに、入力マスクを使用するというシンプルで効果的な解決策があります。これを事例で証明してみましょう。

なぜ入力マスクが必要なのでしょうか?

定型入力は、フィールドにデータを入力する必要がある形式を示します。たとえば、ユーザーが市外局番のない電話番号を入力したり、住所フィールドに電話番号を入力したりすると、次のオプションに進むことができません。フォームのマスクにより、入力されたデータの外観が均一になり、データベースの検索と管理が簡素化されます。 Netpeak の推奨事項によれば、電話番号入力マスクは Web サイトの注文フォームの必須要素です。弊社の専門家による他の実際的な推奨事項と同様、この条項はクライアントの成功事例に基づいています。

アプリに特化したサイトなので、サイト上の数字を入力する欄は任意でした。サイトの注文フォームの「電話番号」フィールドに記入する顧客の割合の変化を追跡するために、Google Analytics のカスタム変数を使用しました。 2月には9人の顧客のうち「電話」欄に記入した人はいなかった。 3 月に入力マスクを導入し、ユーザーは入力マスクを入力し始めました。実験の純度を高めるため、フィールドはオプションのままにし、他の変更は加えませんでした。
3 月の結果は 19 件の問題があり、22 人のユーザーがアプリケーションに記入しました。つまり、アプリケーションを注文したユーザーの 85% が電話番号を残したということになります。

情報センターWebサイトの事例：電話番号入力欄の入力数が15.4％増加

クライアントのウェブサイトは、エッセイ、コースワーク、論文、その他の作品を書くためのサービスを提供します。通信にはユーザーの電話番号が望ましいですが、サイトではこのフィールドはオプションでした。ユーザーはフォームに記入したり、このフィールドに何も書き込んだりすることができませんでした。初回として、最初の段階では、Google Analyticsの「電話」フィールドに記入するためのトラッキングを設定しました。 11月にサイト訪問者が残した59件の申請書のうち、15件には番号が含まれていなかった。つまり、同社が受け取ったのは、番号が記入された提出済みフォームの 74.6% だけでした。次に、電話フィールドに入力マスクを追加しました。 12月には、このサイトには60件の申請があった。さらに、顧客の電話番号が記載されていない記入済みフォームは 6 件のみでした。その結果、送信された注文書の 90% には、電話番号フィールドが正しく入力されていました。 1 か月間で、番号入力マスクの導入のおかげで 15.4% 増加しました。最後に、代理店の内部事例です。

Netpeak Web サイトの注文フォームの数字フィールドもオプションです。ただし、電話番号は、クライアントがアプリケーションの番号とステータスを常に把握し (このデータは SMS 経由で送信されます)、またアカウントマネージャーの作業を最適化するためにも重要です。実験期間は、前の例と同様に 2 か月です。数字入力マスクの登場により、フォームに記入された割合は 44% から 83% に 39.4% 増加しました。
実験後、現場にマスクを導入しました。数値を入力するフィールドはオプションのままです。このフィールドに間違った番号が入力された場合のみ、アプリケーションは処理されません。この場合、マスクの最初の数字は、サイトユーザーがいる国に応じて変わります。事前注文フォームについて話している場合、電話番号を含むアプリケーションの品質がどれほど優れているかを知ることは興味深いことです。私たちは、事前注文フォームを通じてこれまでに受け取ったすべての見込み顧客を収集し、番号なしと番号ありで顧客に転換した見込み顧客の割合を計算しました。後者が0.81%で最も多かったことが判明した。

結論: 誰かがフォームに自分の番号を残したとしても、資金の送金が保証されるわけではありません。

事前注文フォームについて話すと、顧客を再アクティブ化する可能性が浮上し、ユーザーの個人電話番号のデータベースを備えたマーケティング担当者にその機会が開かれます。再アクティベーションの成功事例については、新しい投稿でお話しする予定です。それまでの間、データベース内の電話番号を使用してアクションを行う前に講じるべき対策について読むことをお勧めします。電話番号の入力マスクを実装した経験や、受信アプリケーションの品質に関する観察をコメントで共有してください。