はじめに
Webサイトでは、電話番号情報の入力が非常に必要です。 そのため、各国には独自のダイヤル規則と番号の長さを設定する権利があり、その結果、異なる国の居住者の間で混乱が生じることがあります。いくつかは、先頭の数字が
8
である数字を示すために使用され、他は先頭の数字が
0
であり、さらに他の記号は
+
記号で表示されます。
既存のソリューションの概要
難易度を何らかの方法で解決し、数値を単一の形式にするために、3つの主な解決策があります。
- ユーザーは、定型入力を使用して数値を入力するように求められます。 利点：番号を明確に表示することで、部屋で起こりうるエラーを最小限に抑えます。 欠点：各国には独自のスペルと数字の長さがあります。
- ユーザーは国を個別に選択し、残りの番号を個別に入力するように求められます。 入力マスクを使用している可能性があります。 利点：異なる国（および国内の地域）に異なる入力マスクを使用する機能。 欠点：国のリスト（および各国の地域）が大きい場合があります。 電話番号は全体として存在しなくなります（または、番号を保存および表示する前に前処理が必要です）。
- 数字の前（入力の外側）に
+
記号を付けて、数字の入力のみを許可します。 利点：実装が簡単。 欠点：数字の視覚的表示の欠如。
提案されたソリューション
その結果、現在の数値に応じて変化するように、使い慣れた入力マスクを改良することが決定されました。 さらに、番号を入力すると、決定された国の名前を表示することが提案されます。 このアプローチは、主観的に、上記のソリューションのすべての欠点を解決するはずです。
世界の国の数が比較的少ないことを考えると、すべての国の入力マスクのリストを編集することが決定されました。 情報源は、国際電気通信連合のウェブサイトで公開されている情報を使用しました。
この情報の収集には多くの驚きがありました。 情報を収集する過程で、国内を含む電話番号のすべての可能なオプションを考慮する必要がありました。 ただし、大量の手動で処理された情報のために、収集されたデータベースに不正確さが残っている可能性があります。 時間が経つにつれて、初期セットを修正する予定です。
ソフトウェア実装
Habrahabrで何度も言及されているjquery.inputmask実装は、入力マスクの
として使用されました。 このプラグインは現在活発に開発されており、さらに、拡張機能を簡単に作成するのに十分な方法で設計されています。 ただし、この問題では、このような拡張機能を作成することは事実上不可能でした。 私のニーズに合わせて元のプラグインを変更したり、書き換えたりしませんでした。 著者は引き続き機能の拡張に積極的に取り組んでおり、その結果、編集の適用に問題が生じる可能性があります。 そのため、外部の影響を監視（および傍受）してデータを変更するプラグインアドオンをメインコア上に記述する必要がありました。 メインプラグインのハンドラーの前に外部のインパクトハンドラーを実装するために、 jquery.bind-firstライブラリプラグインが使用されました。
許可される入力マスクを並べ替える
最も適切な入力マスクを正しく選択するには、マスクのセット全体を特別な方法で事前にソートする必要があります。 ソート規則を開発する際、次の規則が採用されました。
- 入力マスク内のすべての文字は、2つのタイプに分けられます。重要な文字（私の場合、これは
#
文字で、これは任意の数字と0-9の数字を意味します）とデコレーター文字（残りすべて）です。 - 入力マスク内の文字の別の区分は、ワイルドカード文字（私の場合、これは
#
文字です）とその他すべてです。
その結果、次のソート規則が適用順に取得されました。
- 2つの入力マスクを文字ごとに比較する場合、重要な文字（デコレータではない）のみが考慮されます。
- 異なるワイルドカードは等しいものとして扱われ、残りの重要な文字はコードに基づいて比較されます。
- 非標準文字は常に野生型文字よりも小さく、その結果より大きくなります。
- 入力マスク内の重要な文字の長さが短いほど、入力マスクが低く、高くなると見なされなくなります。
適切な入力マスクを見つける
入力テキストをソート済みリストの次のマスクと比較する場合、各マスクの重要な文字のみが考慮されます。 文字列が入力マスクより長い場合、以前のすべての文字がテストに合格したという事実にもかかわらず、この入力マスクは不適切と見なされます。 複数の入力マスクが入力テキストを満たす場合、最初の入力マスクが返されます。 さらに、見つかったマスクでは、すべての重要な文字（非テンプレートを含む）がテンプレートに置き換えられます。テンプレートは、テンプレート文字のいずれかが許可するすべての文字の組み合わせです。
イベント処理と傍受
入力マスクのメインコアのイベントハンドラーとの競合を防ぐために、次のイベントがインターセプトされます。
- keydown-メインハンドラーがテキストから1文字を削除する前に、 バックスペースと削除キーストロークを監視して現在の入力マスクを変更します。 さらに、Insertキーの押下を監視し、同期のテキスト入力モードを変更します。
- keypress-入力文字は元の入力マスクでは解決されない可能性があるため（その中のすべての重要な文字がワイルドカードに置き換えられるため）、許可されているマスクの1つについて新しい行を確認する必要があります。 そのようなマスクがない場合、文字入力は破棄され、そうでない場合は、入力マスクが更新され、その後イベントがカーネルハンドラーに渡されます。
- paste 、input-クリップボードからテキストを貼り付けます。 処理をカーネルに転送する前に、クリップボードからテキストを貼り付けた結果の行に対して入力マスクが選択されます。 入力マスクを選択できなかった場合、テキストが少なくとも1つの入力マスクを満たすまで、テキストの末尾から文字ごとのトリミングが実行されます。 関数val（）を呼び出して入力フィールドのテキストを修正するとき、および空でない入力フィールドに適用される場合は、入力マスクを初期化するときに、同様の操作が実行されます。
- dragdrop 、 drop-処理は、貼り付けイベントに似ています。
- blur-入力マスクを満たさない場合、フォーカスが失われたときにテキストクリアモードがオンになっている場合の追加処理。 このイベントは、前のものとは異なり、メインハンドラの後にキャッチされます。
すべてのイベントは、入力マスクスペースで
します。 これにより、アドインが初期化された後にインプットマスクを呼び出すときの不正な動作が回避されます（カーネルは初期化中にインプットマスク空間に以前にインストールされたすべてのハンドラーを削除するため）
使用例
マスクリストの形式
マスクのリストは、オブジェクトのJavaScript配列であり、できれば同じプロパティセットを使用します。 入力マスクを含むプロパティが少なくとも1つは、配列内のすべてのオブジェクトに存在する必要があります。 マスクを含むパラメーターの名前は任意です。 以下は、そのような配列のフラグメントです。
[ … { "mask": "+7(###)###-##-##", "cc": "RU", "name_en": "Russia", "desc_en": "", "name_ru": "", "desc_ru": "" }, { "mask": "+250(###)###-###", "cc": "RW", "name_en": "Rwanda", "desc_en": "", "name_ru": "", "desc_ru": "" }, { "mask": "+966-5-####-####", "cc": "SA", "name_en": "Saudi Arabia ", "desc_en": "mobile", "name_ru": " ", "desc_ru": "" }, { "mask": "+966-#-###-####", "cc": "SA", "name_en": "Saudi Arabia", "desc_en": "", "name_ru": " ", "desc_ru": "" }, … ]
プラグイン接続オプション
接続する前に、マスクのリストをダウンロードして並べ替える必要があります。 これは、次の機能を実行することにより行われます。
$.masksSort = function(maskList, defs, match, key)
- maskList-入力マスクを格納するオブジェクトの配列（オブジェクトのフラグメント、上記を参照）;
- defs-ワイルドカード文字の配列（私の場合、これは
#
文字です）。 - matchは重要な文字を記述する正規表現です（私の場合は
/[0-9]|#/
）。 - keyは、入力マスクを含む配列オブジェクトのパラメーター名です。
接続されると、プラグインにはその操作を説明する特別なオブジェクトが渡されます。 このオブジェクトには、次の一連のパラメーターが含まれています。
- inputmask-メイン入力マスクプラグインに渡されるパラメーターを含むオブジェクト。
- match-ワイルドカードを除く、重要な文字を記述する正規表現。
- replace-すべての重要な文字が置き換えられるワイルドカード文字。 定型入力の定義オブジェクトに存在しない場合があります。
- list-入力マスクを記述するオブジェクトの配列。
- listKey-入力マスクを保存するオブジェクト内のパラメーター名。
- onMaskChange-入力マスクが更新されたときに呼び出される関数。 最初のパラメーターとして、配列からのオブジェクトが渡され、その入力マスクは入力されたテキストに対応し、2番目のパラメーターとして、マスク定義の精度：true-入力マスクは完全に一致し、false-信頼できるマスク定義には追加の文字が必要です。
プラグインを初期化するには、inputmasksメソッドを入力フィールドに適用する必要があります。
$.fn.inputmasks = function(maskOpts, mode)
- maskOpts-プラグインの操作を説明するオブジェクト。
- モード -オプション。 現在、値
isCompleted
がサポートされています-結果として、適切なマスクに対応するテキストが完全に入力された場合、メソッドはtrue
返し、true
ない場合はtrue
返しtrue
。
プラグイン接続の例
<input type="text" id="customer_phone" value="7" size="25"><br> <input type="checkbox" id="phone_mask" checked> <label id="descr" for="phone_mask"> </label> <script> var maskList = $.masksSort($.masksLoad("phone-codes.json"), ['#'], /[0-9]|#/, "mask"); var maskOpts = { inputmask: { definitions: { '#': { validator: "[0-9]", cardinality: 1 } }, //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true }, match: /[0-9]/, replace: '#', list: maskList, listKey: "mask", onMaskChange: function(maskObj, completed) { if (completed) { var hint = maskObj.name_ru; if (maskObj.desc_ru && maskObj.desc_ru != "") { hint += " (" + maskObj.desc_ru + ")"; } $("#descr").html(hint); } else { $("#descr").html(" "); } $(this).attr("placeholder", $(this).inputmask("getemptymask")); } }; $('#phone_mask').change(function() { if ($('#phone_mask').is(':checked')) { $('#customer_phone').inputmasks(maskOpts); } else { $('#customer_phone').inputmask("+[####################]", maskOpts.inputmask) .attr("placeholder", $('#customer_phone').inputmask("getemptymask")); $("#descr").html(" "); } }); $('#phone_mask').change(); </script>
デモンストレーション
開発されたプラグインのデモンストレーションの例は、プロジェクトページに表示されます 。