国際電話入力
v24.7.0
ニュース: 独自の Vue コンポーネントができました!
ニュース: 独自の React コンポーネントができました! Storybook で遊んでみてください。
?️ ニュース: 30 を超える言語で翻訳を提供できるようになりました!実際の動作をご覧ください。
国際電話入力は、国際電話番号を入力および検証するための JavaScript プラグインです。通常の入力フィールドを取得し、検索可能な国ドロップダウンを追加し、ユーザーの国を自動検出し、関連するプレースホルダー番号を表示し、入力時に番号を書式設定し、包括的な検証方法を提供します。 React および Vue コンポーネントも含まれています。
プラグインが役立つと思われる場合は、プロジェクトのサポートをご検討ください。
Twilio の API を使用して、電話認証、SMS 2FA、予約リマインダー、マーケティング通知などを構築します。あなたが何を構築するのか楽しみです。
現在、通常の JavaScript プラグインに加えて、React コンポーネントと Vue コンポーネントの両方を提供しています。この Readme は JavaScript プラグイン用です。 React コンポーネントの Readme または Vue コンポーネントの Readme を参照してください。
ライブデモを表示し、さまざまなオプションの使用例をいくつか確認できます。あるいは、プロジェクトをダウンロードしてブラウザでdemo.htmlを開いて、自分で試してみてください。
デフォルトでは、限られた画面スペースを有効に活用するために、モバイル デバイスではインライン ドロップダウンではなく全画面ポップアップが表示されます。これは、ネイティブの要素の動作と似ています。この動作は、 useFullscreenPopupオプションを使用して制御できます。ポップアップは、リストから国を選択するか、側面の灰色の領域をタップすることで閉じることができます。例を参照してください (React コンポーネントを使用)。
| クロム | Firefox | サファリ | 角 |
|---|---|---|---|
| ✓ | ✓ | v14+ | ✓ |
注: Internet Explorer は Windows のどのバージョンでもサポートされなくなったため、現在、Internet Explorer のすべてのバージョンのサポートは終了しています。
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/[email protected]/build/css/intlTelInput.css " > < script src =" https://cdn.jsdelivr.net/npm/[email protected]/build/js/intlTelInput.min.js " > script >
< script >
const input = document . querySelector ( "#phone" ) ;
window . intlTelInput ( input , {
loadUtilsOnInit : "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" ,
} ) ;
script > npm でインストールします: npm install intl-tel-input --saveまたはyarn: yarn add intl-tel-input
CSS をインポートします: import 'intl-tel-input/build/css/intlTelInput.css';
CSS 変数をオーバーライドして、CSS 内の flags.webp およびGlobe.webp へのパスを設定します。
. iti {
--iti-path-flags-1x : url ( 'path/to/flags.webp' );
--iti-path-flags-2x : url ( 'path/to/[email protected]' );
--iti-path-globe-1x : url ( 'path/to/globe.webp' );
--iti-path-globe-2x : url ( 'path/to/[email protected]' );
} import intlTelInput from 'intl-tel-input' ;
const input = document . querySelector ( "#phone" ) ;
intlTelInput ( input , {
loadUtilsOnInit : ( ) => import ( "intl-tel-input/utils" )
} ) ;ほとんどのバンドラー (Webpack、Vite、Parcel など) はこれを認識し、ユーティリティ スクリプトを別のバンドルに配置し、必要な場合にのみ非同期でロードします。これがバンドラーで機能しない場合、または他の場所 (CDN など) から utils モジュールをロードしたい場合は、 loadUtilsOnInitオプションを文字列としてロードする URL に設定できます。例えば：
import intlTelInput from 'intl-tel-input' ;
const input = document . querySelector ( "#phone" ) ;
intlTelInput ( input , {
loadUtilsOnInit : `https://cdn.jsdelivr.net/npm/intl-tel-input@ ${ intlTelInput . version } /build/js/utils.js` ;
} ) ; 最新リリースをダウンロードするか、npm を使用してインストールすることをお勧めします。
スタイルシートを追加する
< link rel =" stylesheet " href =" path/to/intlTelInput.css " >. iti {
--iti-path-flags-1x : url ( 'path/to/flags.webp' );
--iti-path-flags-2x : url ( 'path/to/[email protected]' );
--iti-path-globe-1x : url ( 'path/to/globe.webp' );
--iti-path-globe-2x : url ( 'path/to/[email protected]' );
} < script src =" path/to/intlTelInput.js " > script >
< script >
const input = document . querySelector ( "#phone" ) ;
window . intlTelInput ( input , {
loadUtilsOnInit : "path/to/utils.js"
} ) ;
script > 付属の utils.js をロードすることを強くお勧めします。これにより、書式設定や検証などが可能になります。その後、プラグインは常に完全な国際形式 (例: "+17024181234") で数値を処理し、 nationalModeまたはseparateDialCodeの場合でも、それに応じて変換するように構築されます。有効になっています。簡素化のため、この形式のみで番号を取得、保存、設定することをお勧めします。そうすれば、完全な国際番号には国コード情報が含まれるため、国コードを個別に処理する必要がなくなります。
getNumberを使用すると、いつでも完全な国際番号 (国コードを含む) を取得できます。その後は、その 1 つの文字列をデータベースに保存するだけで済みます (国を個別に保存する必要はありません)。次にプラグインを初期化するときに、その番号を入力すると、自動的に国が設定され、指定したオプションに従って形式が設定されます (たとえば、 nationalMode使用すると、番号が自動的に国内形式で表示され、国際ダイヤル コードが削除されます)。
ユーザーの国がわかっている場合は、 initialCountry (たとえば、米国の場合は"us" ) を使用して設定できます。そうでない場合は、 initialCountry ( geoIpLookupオプションとともに) "auto"に設定して、ユーザーの国を決定することをお勧めします。 IP アドレスに基づく国 - 例を参照してください。
ユーザーの言語がわかっている場合は、含まれている翻訳を使用して国名 (など) をローカライズできます (例を参照)。
プラグインを初期化するとき、最初の引数は入力要素で、2 番目の引数は必要な初期化オプションを含むオブジェクトです。詳細は以下で説明します。注: 国コードを使用するオプションはすべて ISO 3166-1 alpha-2 コードである必要があります。
ドロップダウンを許可する
タイプ: Boolean値 デフォルト: true
ドロップダウンを許可するかどうか。無効にすると、ドロップダウン矢印は表示されず、選択した国をクリックできなくなります。また、showFlags が有効な場合は、選択されたフラグが単に状態のマーカーであるため、代わりに右側に選択されたフラグが表示されます。 separateDialCodeが有効になっている場合、この場合ユーザーが「+」を入力するとドロップダウンが必要になるため、 allowDropdownが強制的にtrueに設定されることに注意してください。 Storybook でこのオプションを試してみましょう (React コンポーネントを使用)。
自動プレースホルダー
タイプ: Stringデフォルト: "polite"
入力のプレースホルダーを選択した国のサンプル番号に設定し、国が変更された場合はそれを更新します。 placeholderNumberTypeオプションを使用して数値タイプを指定できます。デフォルトでは、 "polite"に設定されています。これは、入力にまだプレースホルダーがない場合にのみプレースホルダーを設定することを意味します。また、既存のプレースホルダーを置き換える"aggressive" 、または"off"に設定することもできます。 utils スクリプトをロードする必要があります。
コンテナクラス 国注文 国検索 カスタムプレースホルダー ドロップダウンコンテナ 除外する国 ドロップダウン幅を修正 入力形式 フォーマットオンディスプレイ geoIpLookup ipapi サービスを使用した例を次に示します。 エラーが発生した場合は 隠し入力 *注: この機能は、最も近いフォーム要素で これにより、次の (非表示) 要素が生成され、送信時に自動的に設定されます。 i18n 必要な言語が現在サポートされていない場合、これを自分で提供するのは簡単です。国リスト プロジェクトから国名が自動的に取り込まれるため、少数の UI 翻訳文字列を指定するだけで済みます。 オプション 1: 提供された翻訳モジュールの 1 つをインポートする オプション 2: 独自のカスタム翻訳を定義する 最初の国 loadUtilsOnInit (v25 の議論を参照) これは、含まれている utils.js を (遅延的に) ロードする 1 つの方法です (フォーマット/検証などを有効にするため)。その他のオプションについては、「ユーティリティ スクリプトのロード」を参照してください。 utils.js ファイルをホストしてから、 あるいは、utils モジュールの Promise を返す関数にすることもできます。 Webpack などのバンドラーを使用する場合、これを使用して、utils スクリプトをコードの残りの部分とは別のファイルに保存する必要があることをバンドラーに指示できます。例: スクリプトはプラグインの初期化時にのみ取得され、さらにブロックを防ぐためにページの読み込みが完了したとき (ウィンドウの読み込みイベント時) にのみ取得されます (スクリプトは約 260 KB)。プラグインをインスタンス化すると、Promise オブジェクトが 全国モード 国のみ プレースホルダー番号タイプ showFlags 個別のダイヤルコード 厳密モード 全画面ポップアップを使用する utilsScript このオプションは非推奨となり、名前が 検証番号の種類 これらの例では、 破壊する getExtension 文字列を返します。たとえば、入力値が getNumber 文字列を返します。例: getNumberType 整数を返します。これは、列挙型 米国では固定回線と携帯電話の番号を区別する方法がないため、代わりに getSelected CountryData 次のようなものを返します: getValidationError 整数を返します。これは、列挙型 有効な番号です 戻り値: isValidNumberPrecise 戻り値: セット国 セット番号 setPlaceholderNumberType setDisabled 国データの取得 国オブジェクトの配列を返します。 インスタンスの取得 loadUtils (v25 の説明を参照) input 要素でトリガーされる次のイベントをリッスンできます。 国替え ここで例を参照してください: 国の同期 開く:国ドロップダウン 閉じる:国ドロップダウン テーマに使用できる CSS 変数が多数あります。完全なリストについては、intlTelInput.scss を参照してください。 空の状態 (地球アイコン) に関しては、デフォルト バージョンはダーク グレーですが、ダーク テーマでより適切に機能する「ライト」バージョンも提供しています。あるいは、テーマに必要な色で地球アイコンを簡単に再生成することもできます。可能な限り最高の解像度でダウンロードし、必要なサイズ (デフォルト バージョンでは幅 20 ピクセル、@2x バージョンでは幅 40 ピクセル) まで画像を縮小することをお勧めします。 ダークモードの例 (以下のスクリーンショット): 注: これは、一般的な本文/入力スタイル用に独自のダーク モード スタイルがすでに設定されていることを前提としています。たとえば、次のようなものです。 例： 当社は、200 を超える国名の翻訳と、その他のユーザー インターフェイス テキスト (国検索入力のプレースホルダー テキストなど) を 30 を超える言語で提供します。使用方法の詳細については、 サポート言語: アラビア語、ベンガル語、ボスニア語、ブルガリア語、カタロニア語、中国語、クロアチア語、チェコ語、デンマーク語、オランダ語、ノルウェー語、英語、ペルシャ語、フィンランド語、フランス語、ドイツ語、ギリシャ語、ヒンディー語、ハンガリー語、インドネシア語、イタリア語、日本語、韓国語、マラーティー語、ポーランド語、ポルトガル語、ルーマニア語、ロシア語、スロバキア語、スペイン語、スウェーデン語、テルグ語、タイ語、トルコ語、ウルドゥー語、ベトナム語。 必要な言語が現在サポートされていない場合、これを自分で提供するのは簡単です。国リスト プロジェクトから国名が自動的に取り込まれるため、少数の UI 翻訳文字列を指定するだけで済みます。 ユーティリティ スクリプト (build/js/utils.js) は、次の機能を有効にする Google の libphonenumber のカスタム ビルドです。 国際的な番号の書式設定/検証は困難です (国/地域によって異なりますが、現在は最大 230 か国をサポートしています)。私たちが見つけた唯一の包括的なソリューションは libphonenumber です。これから、関連する部分を 1 つの JavaScript ファイルにプリコンパイルし、ビルド ディレクトリに含めました。残念ながら、変更後でも、依然として最大 260 KB です。ロードする最適な方法については、以下のセクションを参照してください。 utils スクリプトを自分で再コンパイルするには (例: ビルド元の libphonenumber のバージョンを更新する場合)、貢献ガイドを参照してください。 v25 の説明を参照してください。 utils スクリプトは多くの優れた機能を提供します (上記のセクションを参照) が、ファイルサイズが大きくなります (~260KB)。ファイルサイズを気にするかどうかに応じて、utils スクリプトをロードするには主に 2 つの方法があります。 オプション 1: intlTelInputWithUtils オプション 2:loadUtilsOnInit あるいは、JS モジュール オブジェクトとして utils スクリプトの Promise を返す関数に、 このファイルが遅延ロードされるタイミングをより詳細に制御したい場合は、 全角入力 dropdownContainer: スクロールしてもドロップダウンが閉じない 入力マージン エラーメッセージの表示 ドロップダウンの位置 プレースホルダー ブートストラップ入力グループ プロジェクトの設定と変更の手順、libphonenumber の新しいバージョンに更新する方法、フラグ イメージを更新する方法、または新しい翻訳を追加する方法については、寄稿ガイドを参照してください。 BrowserStack オープンソース プログラムによるユーザー テスト によるブラウザテスト
タイプ: Stringデフォルト: ""
(挿入された) ラッパーに追加する追加のクラス。
タイプ: Arrayデフォルト: null
ISO2 国コードの配列を使用して国リストの順序を指定します。省略された国は、指定された国の後に表示されます。たとえば、 countryOrderを["jp", "kr"]に設定すると、日本、韓国、アフガニスタン、アルバニア、アルジェリアなどのリストが表示されます。
タイプ: Boolean値 デフォルト: true
ドロップダウンの上部に検索入力を追加すると、ユーザーは表示される国をフィルターできるようになります。
タイプ: Functionデフォルト: null
autoPlaceholder によって生成されたプレースホルダーを変更します。文字列を返す必要があります。 intlTelInput ( input , {
customPlaceholder : function ( selectedCountryPlaceholder , selectedCountryData ) {
return "e.g. " + selectedCountryPlaceholder ;
} ,
} ) ;
タイプ: Nodeデフォルト: null
document.bodyなどのノードが必要です。国ドロップダウン マークアップを入力の隣に置く代わりに、指定したノードに追加すると、JavaScript を使用して入力の隣に配置されます ( position: fixedを使用)。これは、入力がoverflow: hiddenを持つコンテナー内にある場合に便利です。スクロールによって位置が崩れるため、ドロップダウンはwindowスクロール イベントで自動的に閉じることに注意してください。
タイプ: Arrayデフォルト: []
ドロップダウンに、ここで指定した国を除くすべての国が表示されます。 Storybook でこのオプションを試してみましょう (React コンポーネントを使用)。
タイプ: Boolean値 デフォルト: true
ドロップダウンの幅を入力幅に固定します (最長の国名と同じ幅ではなく)。 Storybook でこのオプションを試してみましょう (React コンポーネントを使用)。
タイプ: Boolean値 デフォルト: true
ユーザーが入力すると、数値が自動的にフォーマットされます。ユーザーが独自の書式設定文字を入力した場合、この機能は無効になります。 utils スクリプトをロードする必要があります。
タイプ: Boolean値 デフォルト: true
初期化中およびsetNumber時に入力値を ( nationalModeオプションに従って) フォーマットします。 utils スクリプトをロードする必要があります。
タイプ: Functionデフォルト: null
initialCountryを"auto"に設定する場合は、このオプションを使用して、IP ルックアップ サービスを呼び出してユーザーの位置を取得し、関連する国コードを使用してsuccessコールバックを呼び出すカスタム関数を指定する必要があります。また、プラグインをインスタンス化すると、Promise オブジェクトがpromiseインスタンス プロパティで返されるため、 iti.promise.then(...)のようなことを実行して、このような初期化リクエストがいつ完了したかを知ることができることにも注意してください。 intlTelInput ( input , {
initialCountry : "auto" ,
geoIpLookup : function ( success , failure ) {
fetch ( "https://ipapi.co/json" )
. then ( function ( res ) { return res . json ( ) ; } )
. then ( function ( data ) { success ( data . country_code ) ; } )
. catch ( function ( ) { failure ( ) ; } ) ;
}
} ) ;
failureコールバックを呼び出す必要があるため、この例ではcatch()を使用することに注意してください。ヒント: 繰り返しの検索を避けるために、結果を Cookie に保存します。
タイプ: Functionデフォルト: null
フォーム内に非表示の入力フィールドを作成して、完全な国際電話番号と選択した国コードを保存できるようにします。引数として入力された代表電話の名前を受け取る関数を受け取ります。この関数は、電話番号と国コードのそれぞれの非表示の入力の名前を指定するために、 phoneと (オプションで) countryプロパティを持つオブジェクトを返す必要があります。これは、特にnationalModeが有効な場合に、完全な国際番号と国コードが確実に取得されるようにするため、非 Ajax フォーム送信の場合に役立ちます。submitイベントをリッスンするため、入力が要素内にある必要があります。また、これはgetNumber内部的に使用するため、まず utils スクリプトをロードする必要があり、次に有効な数値を期待するため、フォームの送信を許可する前にisValidNumber使用して数値を検証した場合にのみ正しく動作することにも注意してください。 intlTelInput ( input , {
hiddenInput : function ( telInputName ) {
return {
phone : "phone_full" ,
country : "country_code"
} ;
}
} ) ;
"> < input type =" hidden " name =" phone_full " >
< input type =" hidden " name =" country_code " >
タイプ: Objectデフォルト: {}
200 を超える国名およびその他のユーザー インターフェイス テキスト (国検索入力のプレースホルダー テキストなど) のローカリゼーション/カスタマイズを許可します。これを行う最も簡単な方法は、提供されている変換モジュールの 1 つをインポートし、 i18nその値に設定することです (下記のオプション 1 を参照)。この方法で 1 つ以上の個別のキーをオーバーライドすることもできます (下記のオプション 1 を参照)。あるいは、独自のカスタム翻訳を提供することもできます (下記のオプション 2 を参照)。独自のものを指定する場合は、すべての国名 (国リスト プロジェクトからコピーできます。たとえば、ここではフランス語の国名です) と、いくつかの UI 文字列 (以下にリストします) を指定する必要があります。例を参照してください。 import { fr } from "intl-tel-input/i18n" ;
intlTelInput ( input , {
i18n : fr ,
} ) ;
// or to override one or more keys, you could do something like this
intlTelInput ( input , {
i18n : {
... fr ,
searchPlaceholder : "Recherche de pays" ,
} ,
} ) ;
intlTelInput ( input , {
i18n : {
// Country names - see the full list in src/js/intl-tel-input/i18n/en/countries.ts
af : "Afghanistan" ,
al : "Albania" ,
dz : "Algeria" ,
as : "American Samoa" ,
ad : "Andorra" ,
...
// Aria label for the selected country element
selectedCountryAriaLabel : "Selected country" ,
// Screen reader text for when no country is selected
noCountrySelected : "No country selected" ,
// Aria label for the country list element
countryListAriaLabel : "List of countries" ,
// Placeholder for the search input in the dropdown
searchPlaceholder : "Search" ,
// Screen reader text for when the search produces no results
zeroSearchResults : "No results found" ,
// Screen reader text for when the search produces 1 result
oneSearchResult : "1 result found" ,
// Screen reader text for when the search produces multiple results
multipleSearchResults : "${count} results found" ,
}
} ) ;
タイプ: Stringデフォルト: ""
国コードを指定して最初の国の選択を設定します (例: 米国の場合は"us" 。 (ユーザーの国がわからない場合は、これを行わないように注意してください。設定が間違っていて、ユーザーが国番号を自動入力し、確認せずにフォームを送信すると、厄介な問題が発生する可能性があります。場合によっては、これにより検証に合格する可能性があります)間違ったダイヤル コードの番号を保存してしまう可能性があります)。また、 initialCountry "auto"に設定すると、IP アドレスに基づいてユーザーの国が検索されます ( geoIpLookupオプションが必要です - 例を参照)。どのようにinitialCountry使用しても、入力にすでに国際ダイヤルコードの番号が含まれている場合、国の選択は更新されないことに注意してください。
タイプ: Stringまたは() => Promiseデフォルト: ""例: "/build/js/utils.js"loadUtilsOnInitオプションをその URL に設定するか、CDN でホストされているバージョン (例: "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js"を指定する必要があります。 "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" 。スクリプトは動的インポート ステートメントを介してロードされます。つまり、URL は相対的であってはならず、絶対的である必要があります。{ loadUtilsOnInit: () => import("intl-tel-input/utils") }promiseインスタンス プロパティで返されるため、 iti.promise.then(callback)のようなことを実行して、このような初期化リクエストがいつ終了したかを知ることができます。詳細については、「ユーティリティ スクリプト」を参照してください。
タイプ: Boolean値 デフォルト: true
国際形式ではなく国内形式で数値をフォーマットします。これは、プレースホルダー番号、およびユーザーの既存の番号を表示する場合に適用されます。ユーザーが自分の番号を各国形式で入力しても問題ないことに注意してください。ユーザーが正しい国を選択している限り、 getNumber使用して完全な国際番号を抽出できます。例を参照してください。このオプションを有効のままにして、ユーザーに各国形式で番号を入力するよう促すことをお勧めします。これは通常、この方が馴染みがあり、ユーザー エクスペリエンスが向上するためです。
タイプ: Arrayデフォルト: []
ドロップダウンには、指定した国のみが表示されます。例を参照してください。
タイプ: Stringデフォルト: "MOBILE"
enum intlTelInput.utils.numberTypeのキーの 1 つ (例: "FIXED_LINE" ) を指定して、プレースホルダーに使用する数値タイプを設定します。 Storybook でこのオプションを試してみましょう (React コンポーネントを使用)。
タイプ: Boolean値 デフォルト: true
政治的な理由などでフラグを非表示にするには、これを false に設定します。代わりに、一般的な地球アイコンが表示されます。 Storybook でこのオプションを試してみましょう (React コンポーネントを使用)。
タイプ: Boolean値 デフォルト: false
選択した国の国際ダイヤル コードを入力の横に表示し、入力した番号の一部であるように見せます。ユーザーは表示されたダイヤル コードを編集できないため、新しいダイヤル コードを入力しようとする可能性があります。この場合、2 つのダイヤル コードが隣り合うことを避けるために、自動的に国のドロップダウンが開き、新しいダイヤル コードが検索入力に入力されます。その代わり。したがって、+54 と入力すると、ドロップダウンでアルゼンチンが強調表示され、Enter キーを押して選択するだけで、表示されるダイヤル コードが更新されます (この機能を使用するには、 allowDropdownとcountrySearch有効になっている必要があります)。 Storybook でこのオプションを試してみましょう (React コンポーネントを使用)。
タイプ: Boolean値 デフォルト: false
ユーザーが入力を入力するときは、無関係な文字は無視してください。ユーザーが入力できるのは、先頭に数字とオプションのプラスのみです。長さを有効な数値の最大長に制限します (これはvalidationNumberTypeを考慮します)。 utils スクリプトをロードする必要があります。例を参照してください。
タイプ: Boolean値 デフォルト: true on mobile devices, false otherwise
国リストを全画面ポップアップとして表示するか、インライン ドロップダウンとして表示するかを制御します。デフォルトでは、限られたスペースを有効に活用するために (ユーザー エージェントと画面幅に基づいて) モバイル デバイスでは全画面ポップアップとして表示され (ネイティブのの動作と同様)、インライン ドロップダウンとして表示されます。より大きなデバイス/画面。 Storybook でこのオプションを試してみましょう (React コンポーネントを使用)。
タイプ: Stringまたは() => Promiseデフォルト: ""例: "/build/js/utils.js"loadUtilsOnInitに変更されました。そのオプションの詳細を参照して、代わりにそれを使用してください。
タイプ: Stringデフォルト: "MOBILE"
enum intlTelInput.utils.numberTypeのキーの 1 つ ( "FIXED_LINE"など) を指定して、 isValidNumberによる検証中に強制する数値タイプと、 strictModeで強制する数値の長さを設定します。特定のタイプを強制しない場合は、 nullに設定します。 インスタンスメソッド
itiプラグインを初期化するときに返されるプラグイン インスタンスを指します。 const iti = intlTelInput ( input ) ;
入力からプラグインを削除し、すべてのイベント リスナーのバインドを解除します。 iti . destroy ( ) ;
現在の番号から内線番号を取得します。 utils スクリプトをロードする必要があります。 const extension = iti . getExtension ( ) ;
"(702) 555-5555 ext. 1234"の場合、これは"1234"を返します。
指定された形式で現在の番号を取得します (デフォルトは E.164 標準)。ここで確認できる enum intlTelInput.utils.numberFormatでさまざまな形式が利用可能です。 utils スクリプトをロードする必要があります。 nationalModeが有効になっている場合でも、完全な国際番号が返される可能性があることに注意してください。また、このメソッドは有効な数値を期待しているため、検証後にのみ使用する必要があることにも注意してください。 const number = iti . getNumber ( ) ;
// or
const number = iti . getNumber ( intlTelInput . utils . numberFormat . E164 ) ;
"+17024181234"
現在の電話番号の種類（固定電話/携帯電話/フリーダイヤルなど）を取得します。 utils スクリプトをロードする必要があります。 const numberType = iti . getNumberType ( ) ;
intlTelInput.utils.numberTypeのさまざまなオプションと照合できます。 if ( numberType === intlTelInput . utils . numberType . MOBILE ) {
// is a mobile number
}
FIXED_LINE_OR_MOBILE返されることに注意してください。
現在選択されている国の国データを取得します。 const countryData = iti . getSelectedCountryData ( ) ;
{
name : "Afghanistan" ,
iso2 : "af" ,
dialCode : "93"
}
検証エラーに関する詳細情報を取得します。 utils スクリプトをロードする必要があります。 const error = iti . getValidationError ( ) ;
intlTelInput.utils.validationErrorのさまざまなオプションと照合できます。 if ( error === intlTelInput . utils . validationError . TOO_SHORT ) {
// the number is too short
}
現在の数値がその長さに基づいて有効かどうかを確認します。例を参照してください。ほとんどの使用例ではこれで十分です。より正確な検証についてはisValidNumberPrecise参照してください。ただし、 isValidNumberの利点は、世界中の国が数値ルールを定期的に更新する一方で、数値の長さを変更することはほとんどないため、将来性が高いことです。このメソッドがfalseを返した場合は、 getValidationError使用して詳細情報を取得できます。 validationNumberTypeオプションを尊重します (デフォルトでは「MOBILE」に設定されています)。 utils スクリプトをロードする必要があります。 const isValid = iti . isValidNumber ( ) ;
true / false
各国/市外局番などの正確な一致ルールを使用して、現在の番号が有効かどうかを確認します。例を参照してください。これらのルールは世界中のさまざまな国で毎月変更されるため、プラグインを最新の状態に保つように注意する必要があります。そうしないと、有効な番号が拒否され始めることになります。よりシンプルで将来性のある検証形式については、上記のisValidNumber参照してください。検証が失敗した場合は、 getValidationError使用して詳細情報を取得できます。 utils スクリプトをロードする必要があります。 const isValid = iti . isValidNumberPrecise ( ) ;
true / false
選択した国を変更します。 setNumber呼び出して国際ダイヤル コードを含む番号を渡すと、選択した国が自動的に更新されるため、これを行う必要があることはほとんどありません。これが推奨される使用法です。国コード引数を省略して、国をデフォルトの空 (グローブ) 状態に設定できることに注意してください。 iti . setCountry ( "gb" ) ;
番号を入力し、それに応じて選択した国を更新します。 formatOnDisplayが有効な場合、 nationalModeオプションに従って数値を国内形式または国際形式にフォーマットしようとすることに注意してください。 iti . setNumber ( "+447733123456" ) ;
placeholderNumberType オプションを変更します。 iti . setPlaceholderNumberType ( "FIXED_LINE" ) ;
電話入力と選択された国ボタンの両方の無効な属性を更新します。ブール値を受け入れます。注: 入力の無効な属性を直接更新する代わりに、これを使用することをお勧めします。 iti . setDisabled ( true ) ;
静的メソッド
プラグインの国データを取得します。他の場所で再利用するため (例: 独自の国ドロップダウンを生成するため) を参照してください。または、国データを変更するために使用することもできます。変更はプラグインを初期化する前に行う必要があることに注意してください。 const countryData = intlTelInput . getCountryData ( ) ;
[ {
name : "Afghanistan" ,
iso2 : "af" ,
dialCode : "93"
} , ... ]
プラグインを初期化した後は、このメソッドを使用して関連する入力要素を渡すだけでいつでもインスタンスに再度アクセスできます。 const input = document . querySelector ( '#phone' ) ;
const iti = intlTelInput . getInstance ( input ) ;
iti . isValidNumber ( ) ; // etc
loadUtilsOnInitオプションの代替となるこのメソッドを使用すると、オンデマンドで utils.js スクリプトを手動でロードして、フォーマット/検証などを有効にすることができます。詳細については、「ユーティリティ スクリプトのロード」を参照してください。このメソッドはページごとに 1 回だけ呼び出す必要があります。 Promise オブジェクトが返されるので、 loadUtils().then(callback)使用して終了を知ることができます。 {
// Your own loading logic here. Return a JavaScript "module" object with
// the utils as the default export.
return { default: { /* a copy of the utils module */ } }
});"> // Load from a URL:
intlTelInput . loadUtils ( "/build/js/utils.js" ) ;
// Or manage load via some other method with a function:
intlTelInput . loadUtils ( async ( ) => {
// Your own loading logic here. Return a JavaScript "module" object with
// the utils as the default export.
return { default : { /* a copy of the utils module */ } }
} ) ;
イベント
これは、選択した国が更新されたときにトリガーされます。たとえば、ユーザーがドロップダウンから国を選択した場合、入力に別のダイヤル コードを入力した場合、またはsetCountryを呼び出した場合などです。 input . addEventListener ( "countrychange" , function ( ) {
// do something with iti.getSelectedCountryData()
} ) ;
これは、ユーザーがドロップダウンを開いたときにトリガーされます。
これは、ユーザーがドロップダウンを閉じるとトリガーされます。 テーマ/ダークモード
@media ( prefers-color-scheme : dark) {
. iti {
--iti-border-color : # 5b5b5b ;
--iti-dialcode-color : # 999999 ;
--iti-dropdown-bg : # 0d1117 ;
--iti-arrow-color : # aaaaaa ;
--iti-hover-color : # 30363d ;
--iti-path-globe-1x : url ( "path/to/globe_light.webp" );
--iti-path-globe-2x : url ( "path/to/[email protected]" );
}
}
@media ( prefers-color-scheme : dark) {
body , input {
color : white;
background-color : # 0d1117 ;
}
input {
border-color : # 5b5b5b ;
}
input :: placeholder {
color : # 8d96a0 ;
}
}
翻訳
i18nオプションを参照してください。実際の動作をご覧ください。 ユーティリティスクリプト
getNumberおよびsetNumberを使用したフォーマットisValidNumber 、 getNumberType 、およびgetValidationErrorメソッドによる検証placeholderNumberTypeオプションを使用して番号の種類 (携帯電話など) を指定することもできますnationalModeオプションを使用している場合でも、 getNumberを使用して標準化された (E.164) 国際番号を抽出します。 ユーティリティ スクリプトのロード
ファイルサイズを気にしない場合 (たとえば、このスクリプトを遅延ロードしている場合)、最も簡単な方法は、utils スクリプトに付属する完全なバンドル ( /build/js/intlTelInputWithUtils.js ) を使用することです。このスクリプトはメインの intlTelInput.js とまったく同じように使用できます。そのため、ページに直接ロードすることも (通常のようにwindow.intlTelInputを定義します)、次のようにインポートすることもできます: import intlTelInput from "intl-tel-input/intlTelInputWithUtils" 。
ファイルサイズが気になる場合は、プラグインの初期化時に、 loadUtilsOnInit初期化オプションを使用して、utils スクリプトを遅延ロードできます。 utils.js ファイルをホストしてから、 loadUtilsOnInitオプションをその URL に設定するか、CDN でホストされているバージョン (例: "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js"を指定する必要があります。 "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" 。loadUtilsOnInitオプションを設定することもできます。 Webpack、Vite、Parcel などのバンドラーを使用してアプリを構築する場合は、次のように使用して、ユーティリティを別のバンドルに自動的に分離できます。 intlTelInput ( htmlInputElement , {
loadUtilsOnInit : ( ) => import ( "intl-tel-input/utils)
});
loadUtilsOnInitを使用する代わりに、 loadUtils静的メソッドを手動で呼び出すことができます。 トラブルシューティング
入力を全角にしたい場合は、コンテナを同じに設定する必要があります。 . iti { width : 100 % ; }
スクロール時にドロップダウンを閉じないことで問題が発生しているwindow以外のスクロール コンテナがある場合は、単純にその要素のスクロール イベントをリッスンし、 windowでスクロール イベントをトリガーします。これにより、ドロップダウンが閉じられます。 scrollingElement . addEventListener ( "scroll" , function ( ) {
const e = document . createEvent ( 'Event' ) ;
e . initEvent ( "scroll" , true , true ) ;
window . dispatchEvent ( e ) ;
} ) ;
位置揃えのため、デフォルトの CSS では入力の垂直マージンが0pxに強制されます。垂直方向のマージンが必要な場合は、それをコンテナー (クラスitiを使用) に追加する必要があります。
エラー処理コードがの前にエラー メッセージを挿入すると、レイアウトが壊れます。代わりに、コンテナー (クラスitiを使用) の前にこれを挿入する必要があります。
利用可能なスペースに応じて、ドロップダウンが入力の上/下に自動的に表示されます。これが正しく機能するには、 が DOM に追加された後でのみプラグインを初期化する必要があります。
国固有の自動プレースホルダーを取得するには、 のプレースホルダー属性を省略するか、 autoPlaceholder "aggressive"に設定して既存のプレースホルダーをオーバーライドします。
プラグインをブートストラップ入力グループで適切に動作させるには、CSS をいくつか修正する必要があります。コードペンはここで見ることができます。
注: 現在、Mobile Safari にはバグがあり、入力グループ内のドロップダウン矢印 (CSS の三角形) をクリックするとクラッシュが発生します。最も簡単な回避策は、次の行で CSS 三角形を削除することです。 . iti__arrow { border : none; }
貢献する
帰属
拡大する
