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，它可以启用格式化和验证等。然后，该插件将始终处理完整国际格式的数字（例如“[phone]”）并相应地转换它们 - 即使在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]" );
  }
}