intl tel input

國際電話輸入

新聞：我們現在有了自己的 Vue 元件！

新聞：我們現在有了自己的 React 元件！在 Storybook 上玩它。

?️ 新聞：我們現在提供 30 多種語言的翻譯！看看他們的實際行動。

國際電話輸入是一個 JavaScript 插件，用於輸入和驗證國際電話號碼。它採用常規輸入字段，添加可搜尋的國家/地區下拉列表，自動檢測用戶的國家/地區，顯示相關的佔位符號碼，在您鍵入時格式化號碼，並提供全面的驗證方法。 React 和 Vue 元件也包括在內。

如果您發現該外掛有幫助，請考慮支援該專案。

贊助商

使用 Twilio 的 API 建立電話驗證、簡訊 2FA、預約提醒、行銷通知等等。我們迫不及待地想看看您建造了什麼。

目錄

• React 和 Vue 元件
• 演示和範例
• 移動的
• 特徵
• 瀏覽器相容性
• 入門
• 推薦使用方式
• 初始化選項
• 實例方法
• 靜態方法
• 活動
• 主題/黑暗模式
• 翻譯
• 實用程式腳本
• 載入實用程式腳本
• 故障排除
• 貢獻
• 歸因

React 和 Vue 元件

我們現在提供 React 和 Vue 元件以及常規 JavaScript 外掛程式。本自述文件適用於 JavaScript 插件。查看 React 元件自述文件或 Vue 元件自述文件。

演示和範例

您可以觀看現場演示並查看一些如何使用各種選項的範例。或者，您也可以透過下載專案並在瀏覽器中開啟 demo.html 來親自嘗試。

移動的

預設情況下，在行動裝置上，我們顯示全螢幕彈出視窗而不是內聯下拉選單，以更好地利用有限的螢幕空間。這類似於本機<select>元素的工作方式。您可以使用useFullscreenPopup選項控制此行為。可以從清單中選擇一個國家或點擊兩側的灰色區域來關閉彈出視窗。請參閱範例（使用 React 元件）。

特徵

• 使用 IP 尋找自動選擇使用者目前所在的國家/地區
• 自動將輸入佔位符設定為所選國家/地區的範例號碼
• 透過鍵入國家/地區名稱或使用向上/向下鍵導航國家/地區下拉列表
• 當使用者鍵入時自動設定數字格式
• （可選）僅允許數字字元並將數字限制在最大有效長度
• 用戶輸入他們的國內號碼，插件會為您提供完整的標準化國際號碼
• 數位驗證，包括特定錯誤類型
• 高解析度旗幟圖像
• 透過 ARIA 標籤提供的輔助功能
• 包括 Typescript 類型定義
• 透過覆蓋 CSS 變數輕鬆自訂樣式
• 還包括 React 和 Vue 元件
• 提供多種不同語言的國家名稱（等）翻譯
• 許多用於自訂的初始化選項，以及用於互動的實例方法/事件

瀏覽器相容性

鉻合金	火狐瀏覽器	狩獵之旅	邊緣
✓	✓	v14+	✓

注意：我們現在已放棄對所有版本的 Internet Explorer 的支持，因為任何版本的 Windows 都不再支援它。

入門（使用 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， nationalMode可以啟用格式化和separateDialCode等。時也是如此已啟用。為了簡單起見，我們建議您僅以這種格式獲取、儲存和設定號碼 - 這樣您就不必單獨處理國家/地區代碼，因為完整的國際號碼包含國家/地區代碼資訊。

您始終可以使用getNumber來取得完整的國際號碼（包括國家代碼），然後您只需將該字串儲存在資料庫中（無需單獨儲存國家/地區），然後在下次初始化插件時輸入該號碼後，它將自動設定國家/地區並根據您指定的選項進行格式化（例如，當使用nationalMode時，它將自動以國家格式顯示號碼，刪除國際撥號代碼）。

如果您知道使用者的國家/地區，則可以使用initialCountry進行設定（例如"us"代表美國），如果您不知道，我們建議將initialCountry設定為"auto" （與geoIpLookup選項一起）來確定使用者的國家/地區基於 IP 位址的國家/地區 - 請參閱範例。

如果您知道使用者的語言，則可以使用包含的翻譯來在地化國家/地區名稱（等） - 請參閱範例。

初始化選項

當您初始化插件時，第一個參數是輸入元素，第二個參數是包含您想要的任何初始化選項的對象，下面將詳細介紹。注意：任何採用國家代碼的選項都應為 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 腳本。

地理查找
類型： 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屬性的對象，以分別指定電話號碼和國家代碼的隱藏輸入的名稱。這對於非 Ajax 表單提交非常有用，可確保擷取完整的國際號碼和國家/地區代碼，特別是在啟用nationalMode時。

*注意：此功能要求輸入位於<form>元素內，因為它會偵聽最近的表單元素上的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 多個國家/地區名稱以及其他使用者介面文字（例如國家/地區搜尋輸入的佔位符文字）。最簡單的方法是匯入提供的翻譯模組之一並將i18n設定為該值（請參閱下面的選項 1）。您也可以透過這種方式覆蓋一個或多個單獨的按鍵（請參閱下面的選項 1）。或者，您可以提供自己的自訂翻譯（請參閱下面的選項 2）。如果提供您自己的國家/地區名稱，則需要指定所有國家/地區名稱（可以從國家/地區清單項目複製，例如，這裡是法語的國家/地區名稱）以及一些 UI 字串（如下所列）。參見範例。

如果我們目前不支援您需要的語言，您可以輕鬆自行貢獻 - 您只需提供少量 UI 翻譯字串，因為我們會自動從國家/地區清單項目中提取國家/地區名稱。

選項 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（以啟用格式化/驗證等）的一種方法 - 請參閱載入實用程式腳本以取得更多選項。您需要託管 utils.js 文件，然後將loadUtilsOnInit選項設定為該 URL，或僅將其指向 CDN 託管版本，例如"https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" 。該腳本透過動態導入語句加載，這意味著 URL 不能是相對的 - 它必須是絕對的。

或者，這可以是一個傳回 utils 模組承諾的函數。當使用像 Webpack 這樣的捆綁器時，這可以用來告訴捆綁器 utils 腳本應該與其餘程式碼保存在單獨的檔案中。例如： { loadUtilsOnInit: () => import("intl-tel-input/utils") } 。

只有當您初始化外掛程式時才取得腳本，此外，僅當頁面完成載入（在視窗載入事件上）時才取得腳本，以防止阻塞（腳本約為 260KB）。實例化插件時，會在promise實例屬性下傳回一個 Promise 對象，因此您可以執行類似iti.promise.then(callback)的操作來了解此類初始化請求何時完成。有關詳細信息，請參閱實用程式腳本。

國家模式
類型： Boolean預設值： true
以國家格式而非國際格式格式化數字。這適用於佔位符號碼以及顯示使用者的現有號碼時。請注意，用戶可以以國家/地區格式鍵入號碼 - 只要他們選擇了正確的國家/地區，您就可以使用getNumber提取完整的國際號碼 - 請參閱範例。建議啟用此選項，以鼓勵用戶以國家格式輸入號碼，因為這通常對他們來說更熟悉，因此可以創造更好的用戶體驗。

限國家
類型： Array預設值： []
在下拉清單中，僅顯示您指定的國家/地區 - 請參閱範例。

佔位符數字類型
類型： String預設值： "MOBILE"
指定枚舉intlTelInput.utils.numberType中的按鍵之一（例如"FIXED_LINE" ）以設定用於佔位符的數字類型。在 Storybook 上使用此選項（使用 React 元件）。

顯示標誌
類型： Boolean預設值： true
將其設為 false 以隱藏標誌，例如出於政治原因。相反，它將顯示一個通用的地球圖示。在 Storybook 上使用此選項（使用 React 元件）。

單獨的撥號代碼
類型： Boolean預設值： false
在輸入旁邊顯示所選國家/地區的國際撥號代碼，因此它看起來像是鍵入的號碼的一部分。由於用戶無法編輯顯示的撥號代碼，他們可能會嘗試輸入新的撥號代碼- 在這種情況下，為了避免兩個撥號代碼彼此相鄰，我們會自動打開國家/地區下拉列表並將新的撥號代碼放入搜尋輸入中反而。因此，如果他們輸入 +54，那麼阿根廷將在下拉列表中突出顯示，他們只需按 Enter 即可選擇它，從而更新顯示的撥號代碼（此功能需要啟用allowDropdown和countrySearch ）。在 Storybook 上使用此選項（使用 React 元件）。

嚴格模式
類型： Boolean預設值： false
當使用者輸入內容時，忽略任何不相關的字元。使用者只能輸入數字字元和開頭的可選加號。將長度限制為最大有效數字長度（這尊重validationNumberType ）。需要載入 utils 腳本。參見範例。

使用全螢幕彈出視窗
類型： Boolean預設值： true on mobile devices, false otherwise
控制國家/地區清單何時顯示為全螢幕彈出視窗或內嵌下拉式選單。預設情況下，它將在行動裝置上顯示為全螢幕彈出視窗（基於用戶代理和螢幕寬度），以更好地利用有限的空間（類似於本機<select>工作方式），並作為內聯下拉選單更大的設備/螢幕。在 Storybook 上使用此選項（使用 React 元件）。

utils腳本️已棄用
類型： String或() => Promise<module>預設值： ""範例： "/build/js/utils.js"

此選項已棄用並已重新命名為loadUtilsOnInit 。請查看該選項的詳細資訊並使用它。

驗證編號類型
類型： String預設值： "MOBILE"
指定枚舉intlTelInput.utils.numberType中的鍵之一（例如"FIXED_LINE" ），以設定在驗證期間使用isValidNumber強制執行的數字類型，以及使用strictMode強制執行的數字長度。將其設為null以不強制執行任何特定類型。

實例方法

在這些範例中， iti指的是初始化插件時傳回的插件實例，例如

 const iti = intlTelInput ( input ) ;

破壞
從輸入中刪除插件，並取消綁定任何事件偵聽器。

 iti . destroy ( ) ;

取得擴充名
從目前號碼取得分機號碼。需要載入 utils 腳本。

 const extension = iti . getExtension ( ) ;

傳回一個字串，例如如果輸入值為"[phone] ext. 1234" ，則會傳回"1234"

取得號碼
取得給定格式的目前號碼（預設為 E.164 標準）。枚舉intlTelInput.utils.numberFormat中提供了不同的格式 - 您可以在此處查看。需要載入 utils 腳本。請注意，即使啟用了nationalMode ，這仍然可以傳回完整的國際號碼。另請注意，此方法需要一個有效的數字，因此只能在驗證後使用。

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

傳回一個字串，例如"[phone]"

取得號碼類型
取得目前號碼的類型（固話/移動/免費等）。需要載入 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

isValidNumberPrecise ️已棄用 - 請參閱討論
使用每個國家/地區代碼等的精確匹配規則檢查當前號碼是否有效 - 請參閱範例。請注意，這些規則對於世界各地的各個國家/地區每個月都會發生變化，因此您需要小心地使插件保持最新狀態，否則您將開始拒絕有效號碼。有關更簡單且更面向未來的驗證形式，請參閱上面的isValidNumber 。如果驗證失敗，您可以使用getValidationError來取得更多資訊。需要載入 utils 腳本。

 const isValid = iti . isValidNumberPrecise ( ) ;

返回： true / false

設定國家
更改所選國家。您需要這樣做的情況應該很少（如果有的話），因為在呼叫setNumber並傳遞包含國際撥號代碼的號碼（這是建議的用法）時，所選國家/地區會自動更新。請注意，您可以省略國家/地區代碼參數以將國家/地區設定為預設的空（地球）狀態。

 iti . setCountry ( "gb" ) ;

設定編號
插入號碼，並相應地更新所選國家。請注意，如果啟用了formatOnDisplay ，這將嘗試根據nationalMode選項將號碼格式化為國內或國際格式。

 iti . setNumber ( "[phone]" ) ;

設定佔位符數字類型
變更佔位符編號類型選項。

 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

loadUtils （參閱 v25 討論）
作為loadUtilsOnInit選項的替代方案，此方法允許您根據需要手動加載 utils.js 腳本，以啟用格式化/驗證等。每個頁面只應呼叫此方法一次。傳回 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 */ } }
} ) ; 

活動

您可以偵聽輸入元素上觸發的以下事件。

國家變遷
當所選國家/地區更新時會觸發此操作，例如，如果使用者從下拉清單中選擇一個國家/地區，或者他們在輸入中鍵入不同的撥號代碼，或者您呼叫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]" );
  }
}