intl tel input

国際電話入力

ニュース: 独自の Vue コンポーネントができました!

ニュース: 独自の React コンポーネントができました! Storybook で遊んでみてください。

?️ ニュース: 30 を超える言語で翻訳を提供できるようになりました!実際の動作をご覧ください。

国際電話入力は、国際電話番号を入力および検証するための JavaScript プラグインです。通常の入力フィールドを取得し、検索可能な国ドロップダウンを追加し、ユーザーの国を自動検出し、関連するプレースホルダー番号を表示し、入力時に番号を書式設定し、包括的な検証方法を提供します。 React および Vue コンポーネントも含まれています。

プラグインが役立つと思われる場合は、プロジェクトのサポートをご検討ください。

主催

Twilio の API を使用して、電話認証、SMS 2FA、予約リマインダー、マーケティング通知などを構築します。あなたが何を構築するのか楽しみです。

目次

• React および Vue コンポーネント
• デモと例
• 携帯
• 特徴
• ブラウザの互換性
• はじめる
• 推奨される使用方法
• 初期化オプション
• インスタンスメソッド
• 静的メソッド
• イベント
• テーマ/ダークモード
• 翻訳
• ユーティリティスクリプト
• ユーティリティ スクリプトのロード
• トラブルシューティング
• 貢献する
• 帰属

React および Vue コンポーネント

現在、通常の JavaScript プラグインに加えて、React コンポーネントと Vue コンポーネントの両方を提供しています。この Readme は JavaScript プラグイン用です。 React コンポーネントの Readme または Vue コンポーネントの Readme を参照してください。

デモと例

ライブデモを表示し、さまざまなオプションの使用例をいくつか確認できます。あるいは、プロジェクトをダウンロードしてブラウザでdemo.htmlを開いて、自分で試してみてください。

携帯

デフォルトでは、限られた画面スペースを有効に活用するために、モバイル デバイスではインライン ドロップダウンではなく全画面ポップアップが表示されます。これは、ネイティブの<select>要素の動作と似ています。この動作は、 useFullscreenPopupオプションを使用して制御できます。ポップアップは、リストから国を選択するか、側面の灰色の領域をタップすることで閉じることができます。例を参照してください (React コンポーネントを使用)。

特徴

• IP ルックアップを使用してユーザーの現在の国を自動的に選択します
• 入力プレースホルダーを選択した国の例の番号に自動的に設定します
• 国の名前を入力するか、上下キーを使用して、国のドロップダウンを移動します。
• ユーザーが入力するときに数値を自動的にフォーマットします
• オプションで、数字のみを許可し、有効な最大長で数字を制限します。
• ユーザーが国内番号を入力すると、プラグインによって完全な標準化された国際番号が表示されます。
• 特定のエラー タイプを含む数値検証
• 高解像度の国旗画像
• ARIA タグを介して提供されるアクセシビリティ
• Typescript の型定義が含まれています
• CSS変数をオーバーライドすることでスタイルを簡単にカスタマイズできます
• React および Vue コンポーネントも含まれています
• 国名などの翻訳をさまざまな言語で提供
• カスタマイズのための多数の初期化オプション、および対話のためのインスタンス メソッド/イベント

ブラウザの互換性

クロム	Firefox	サファリ	角
✓	✓	v14+	✓

注: Internet Explorer は Windows のどのバージョンでもサポートされなくなったため、現在、Internet Explorer のすべてのバージョンのサポートは終了しています。

はじめに (CDN の使用)

1. CSSを追加する

 < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/[email protected]/build/css/intlTelInput.css " >

2. プラグイン スクリプトを追加し、入力要素で初期化します。

 < 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 > 

はじめに (Webpack などのバンドラーの使用)

1. npm でインストールします: npm install intl-tel-input --saveまたはyarn: yarn add intl-tel-input

2. CSS をインポートします: import 'intl-tel-input/build/css/intlTelInput.css';

3. 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]' );
}

4. JS をインポートし、入力要素でプラグインを初期化します。

 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` ;
} ) ; 

はじめに (バンドラーを使用しない)

1. 最新リリースをダウンロードするか、npm を使用してインストールすることをお勧めします。

2. スタイルシートを追加する

 < link rel =" stylesheet " href =" path/to/intlTelInput.css " >

3. 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]' );
}

4. プラグイン スクリプトを追加し、入力要素で初期化します。

 < script src =" path/to/intlTelInput.js " > </ script >
< script >
  const input = document . querySelector ( "#phone" ) ;
  window . intlTelInput ( input , {
    loadUtilsOnInit : "path/to/utils.js"
  } ) ;
</ script > 

推奨される使用方法

付属の utils.js をロードすることを強くお勧めします。これにより、書式設定や検証などが可能になります。その後、プラグインは常に完全な国際形式 (例: "[phone]") で数値を処理し、 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 スクリプトをロードする必要があります。

コンテナクラス
タイプ: Stringデフォルト: ""
(挿入された) ラッパー<div>に追加する追加のクラス。

国注文
タイプ: 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 スクリプトをロードする必要があります。

geoIpLookup
タイプ: Functionデフォルト: null
initialCountryを"auto"に設定する場合は、このオプションを使用して、IP ルックアップ サービスを呼び出してユーザーの位置を取得し、関連する国コードを使用してsuccessコールバックを呼び出すカスタム関数を指定する必要があります。また、プラグインをインスタンス化すると、Promise オブジェクトがpromiseインスタンス プロパティで返されるため、 iti.promise.then(...)のようなことを実行して、このような初期化リクエストがいつ完了したかを知ることができることにも注意してください。

ipapi サービスを使用した例を次に示します。

 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イベントをリッスンするため、入力が<form>要素内にある必要があります。また、これは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 " >

i18n
タイプ: Objectデフォルト: {}
200 を超える国名およびその他のユーザー インターフェイス テキスト (国検索入力のプレースホルダー テキストなど) のローカリゼーション/カスタマイズを許可します。これを行う最も簡単な方法は、提供されている変換モジュールの 1 つをインポートし、 i18nその値に設定することです (下記のオプション 1 を参照)。この方法で 1 つ以上の個別のキーをオーバーライドすることもできます (下記のオプション 1 を参照)。あるいは、独自のカスタム翻訳を提供することもできます (下記のオプション 2 を参照)。独自のものを指定する場合は、すべての国名 (国リスト プロジェクトからコピーできます。たとえば、ここではフランス語の国名です) と、いくつかの UI 文字列 (以下にリストします) を指定する必要があります。例を参照してください。

必要な言語が現在サポートされていない場合、これを自分で提供するのは簡単です。国リスト プロジェクトから国名が自動的に取り込まれるため、少数の UI 翻訳文字列を指定するだけで済みます。

オプション 1: 提供された翻訳モジュールの 1 つをインポートする

 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" ,
  } ,
} ) ;

オプション 2: 独自のカスタム翻訳を定義する

 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使用しても、入力にすでに国際ダイヤルコードの番号が含まれている場合、国の選択は更新されないことに注意してください。

loadUtilsOnInit (v25 の議論を参照)
タイプ: Stringまたは() => Promise<module>デフォルト: ""例: "/build/js/utils.js"

これは、含まれている utils.js を (遅延的に) ロードする 1 つの方法です (フォーマット/検証などを有効にするため)。その他のオプションについては、「ユーティリティ スクリプトのロード」を参照してください。 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 は相対的であってはならず、絶対的である必要があります。

あるいは、utils モジュールの Promise を返す関数にすることもできます。 Webpack などのバンドラーを使用する場合、これを使用して、utils スクリプトをコードの残りの部分とは別のファイルに保存する必要があることをバンドラーに指示できます。例: { loadUtilsOnInit: () => import("intl-tel-input/utils") }

スクリプトはプラグインの初期化時にのみ取得され、さらにブロックを防ぐためにページの読み込みが完了したとき (ウィンドウの読み込みイベント時) にのみ取得されます (スクリプトは約 260 KB)。プラグインをインスタンス化すると、Promise オブジェクトがpromiseインスタンス プロパティで返されるため、 iti.promise.then(callback)のようなことを実行して、このような初期化リクエストがいつ終了したかを知ることができます。詳細については、「ユーティリティ スクリプト」を参照してください。

全国モード
タイプ: Boolean値 デフォルト: true
国際形式ではなく国内形式で数値をフォーマットします。これは、プレースホルダー番号、およびユーザーの既存の番号を表示する場合に適用されます。ユーザーが自分の番号を各国形式で入力しても問題ないことに注意してください。ユーザーが正しい国を選択している限り、 getNumber使用して完全な国際番号を抽出できます。例を参照してください。このオプションを有効のままにして、ユーザーに各国形式で番号を入力するよう促すことをお勧めします。これは通常、この方が馴染みがあり、ユーザー エクスペリエンスが向上するためです。

国のみ
タイプ: Arrayデフォルト: []
ドロップダウンには、指定した国のみが表示されます。例を参照してください。

プレースホルダー番号タイプ
タイプ: Stringデフォルト: "MOBILE"
enum intlTelInput.utils.numberTypeのキーの 1 つ (例: "FIXED_LINE" ) を指定して、プレースホルダーに使用する数値タイプを設定します。 Storybook でこのオプションを試してみましょう (React コンポーネントを使用)。

showFlags
タイプ: 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
国リストを全画面ポップアップとして表示するか、インライン ドロップダウンとして表示するかを制御します。デフォルトでは、限られたスペースを有効に活用するために (ユーザー エージェントと画面幅に基づいて) モバイル デバイスでは全画面ポップアップとして表示され (ネイティブの<select>の動作と同様)、インライン ドロップダウンとして表示されます。より大きなデバイス/画面。 Storybook でこのオプションを試してみましょう (React コンポーネントを使用)。

utilsScript ️非推奨
タイプ: Stringまたは() => Promise<module>デフォルト: ""例: "/build/js/utils.js"

このオプションは非推奨となり、名前がloadUtilsOnInitに変更されました。そのオプションの詳細を参照して、代わりにそれを使用してください。

検証番号の種類
タイプ: Stringデフォルト: "MOBILE"
enum intlTelInput.utils.numberTypeのキーの 1 つ (例: "FIXED_LINE" ) を指定して、 isValidNumberによる検証中に強制する数値タイプと、 strictModeで強制する数値の長さを設定します。特定のタイプを強制しない場合は、 nullに設定します。

インスタンスメソッド

これらの例では、 itiプラグインを初期化するときに返されるプラグイン インスタンスを指します。

 const iti = intlTelInput ( input ) ;

破壊する
入力からプラグインを削除し、すべてのイベント リスナーのバインドを解除します。

 iti . destroy ( ) ;

getExtension
現在の番号から内線番号を取得します。 utils スクリプトをロードする必要があります。

 const extension = iti . getExtension ( ) ;

文字列を返します。たとえば、入力値が"[phone] ext. 1234"の場合、これは"1234"を返します。

getNumber
指定された形式で現在の番号を取得します (デフォルトは E.164 標準)。ここで確認できる enum intlTelInput.utils.numberFormatでさまざまな形式が利用可能です。 utils スクリプトをロードする必要があります。 nationalModeが有効になっている場合でも、完全な国際番号が返される可能性があることに注意してください。また、このメソッドは有効な数値を期待しているため、検証後にのみ使用する必要があることにも注意してください。

 const number = iti . getNumber ( ) ;
// or
const number = iti . getNumber ( intlTelInput . utils . numberFormat . E164 ) ;

文字列を返します。例: "[phone]"

getNumberType
現在の電話番号の種類（固定電話/携帯電話/フリーダイヤルなど）を取得します。 utils スクリプトをロードする必要があります。

 const numberType = iti . getNumberType ( ) ;

整数を返します。これは、列挙型intlTelInput.utils.numberTypeのさまざまなオプションと照合できます。

 if ( numberType === intlTelInput . utils . numberType . MOBILE ) {
    // is a mobile number
}

米国では固定回線と携帯電話の番号を区別する方法がないため、代わりにFIXED_LINE_OR_MOBILE返されることに注意してください。

getSelected CountryData
現在選択されている国の国データを取得します。

 const countryData = iti . getSelectedCountryData ( ) ;

次のようなものを返します:

 {
  name : "Afghanistan" ,
  iso2 : "af" ,
  dialCode : "93"
}

getValidationError
検証エラーに関する詳細情報を取得します。 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

isValidNumberPrecise ️非推奨 - ディスカッションを参照
各国/市外局番などの正確な一致ルールを使用して、現在の番号が有効かどうかを確認します。例を参照してください。これらのルールは世界中のさまざまな国で毎月変更されるため、プラグインを最新の状態に保つように注意する必要があります。そうしないと、有効な番号が拒否され始めることになります。よりシンプルで将来性のある検証形式については、上記のisValidNumber参照してください。検証が失敗した場合は、 getValidationError使用して詳細情報を取得できます。 utils スクリプトをロードする必要があります。

 const isValid = iti . isValidNumberPrecise ( ) ;

戻り値: true / false

セット国
選択した国を変更します。 setNumber呼び出して国際ダイヤル コードを含む番号を渡すと、選択した国が自動的に更新されるため、これを行う必要があることはほとんどありません。これが推奨される使用方法です。国コード引数を省略して、国をデフォルトの空 (グローブ) 状態に設定できることに注意してください。

 iti . setCountry ( "gb" ) ;

セット番号
番号を入力し、それに応じて選択した国を更新します。 formatOnDisplayが有効な場合、 nationalModeオプションに従って数値を国内形式または国際形式にフォーマットしようとすることに注意してください。

 iti . setNumber ( "[phone]" ) ;

setPlaceholderNumberType
placeholderNumberType オプションを変更します。

 iti . setPlaceholderNumberType ( "FIXED_LINE" ) ;

setDisabled
電話入力と選択された国ボタンの両方の無効な属性を更新します。ブール値を受け入れます。注: 入力の無効な属性を直接更新する代わりに、これを使用することをお勧めします。

 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

loadUtils (v25 の説明を参照)
loadUtilsOnInitオプションの代替となるこのメソッドを使用すると、オンデマンドで utils.js スクリプトを手動でロードして、フォーマット/検証などを有効にすることができます。詳細については、「ユーティリティ スクリプトのロード」を参照してください。このメソッドはページごとに 1 回だけ呼び出す必要があります。 Promise オブジェクトが返されるので、 loadUtils().then(callback)使用して終了を知ることができます。

 // 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 */ } }
} ) ; 

イベント

input 要素でトリガーされる次のイベントをリッスンできます。

国替え
これは、選択した国が更新されたときにトリガーされます。たとえば、ユーザーがドロップダウンから国を選択した場合、入力に別のダイヤル コードを入力した場合、またはsetCountryを呼び出した場合などです。

 input . addEventListener ( "countrychange" , function ( ) {
  // do something with iti.getSelectedCountryData()
} ) ;

ここで例を参照してください: 国の同期

開く:国ドロップダウン
これは、ユーザーがドロップダウンを開いたときにトリガーされます。

閉じる:国ドロップダウン
これは、ユーザーがドロップダウンを閉じるとトリガーされます。

テーマ/ダークモード

テーマに使用できる CSS 変数が多数あります。完全なリストについては、intlTelInput.scss を参照してください。

空の状態 (地球アイコン) に関しては、デフォルト バージョンはダーク グレーですが、ダーク テーマでより適切に機能する「ライト」バージョンも提供しています。あるいは、テーマに必要な色で地球アイコンを簡単に再生成することもできます。可能な限り最高の解像度でダウンロードし、必要なサイズ (デフォルト バージョンでは幅 20 ピクセル、@2x バージョンでは幅 40 ピクセル) まで画像を縮小することをお勧めします。

ダークモードの例 (以下のスクリーンショット):

 @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]" );
  }
}