国际电话输入
v24.7.0
新闻：我们现在有了自己的 Vue 组件！
新闻：我们现在有了自己的 React 组件！在 Storybook 上玩它。
?️ 新闻：我们现在提供 30 多种语言的翻译！看看他们的实际行动。
国际电话输入是一个 JavaScript 插件，用于输入和验证国际电话号码。它采用常规输入字段，添加可搜索的国家/地区下拉列表，自动检测用户的国家/地区，显示相关的占位符号码，在您键入时格式化号码，并提供全面的验证方法。 React 和 Vue 组件也包括在内。
如果您发现该插件有帮助，请考虑支持该项目。
使用 Twilio 的 API 构建电话验证、短信 2FA、预约提醒、营销通知等等。我们迫不及待地想看看您构建了什么。
我们现在提供 React 和 Vue 组件以及常规 JavaScript 插件。本自述文件适用于 JavaScript 插件。查看 React 组件自述文件或 Vue 组件自述文件。
您可以观看现场演示并查看一些如何使用各种选项的示例。或者，您也可以通过下载项目并在浏览器中打开 demo.html 来亲自尝试。
默认情况下，在移动设备上，我们显示全屏弹出窗口而不是内联下拉菜单，以更好地利用有限的屏幕空间。这类似于本机元素的工作方式。您可以使用useFullscreenPopup选项控制此行为。可以通过从列表中选择一个国家/地区或点击两侧的灰色区域来关闭弹出窗口。请参阅示例（使用 React 组件）。
| 铬合金 | 火狐浏览器 | 狩猎之旅 | 边缘 |
|---|---|---|---|
| ✓ | ✓ | v14+ | ✓ |
注意：我们现已放弃对所有版本的 Internet Explorer 的支持，因为任何版本的 Windows 都不再支持它。
< 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获取完整的国际号码（包括国家/地区代码），然后您只需将该字符串存储在数据库中（无需单独存储国家/地区），然后在下次初始化插件时输入该号码后，它将自动设置国家/地区并根据您指定的选项对其进行格式化（例如，当使用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 脚本。
容器类 国家订单 国家搜索 自定义占位符 下拉容器 排除国家 修复下拉宽度 键入时格式化 显示格式 地理查找 以下是使用 ipapi 服务的示例： 请注意，发生错误时必须调用 隐藏输入 *注意：此功能要求输入位于 这将生成以下（隐藏）元素，这些元素将在提交时自动填充： 国际化 如果我们当前不支持您需要的语言，您可以轻松自行贡献 - 您只需提供少量 UI 翻译字符串，因为我们会自动从国家/地区列表项目中提取国家/地区名称。 选项 1：导入提供的翻译模块之一 选项 2：定义您自己的自定义翻译 初始国家 loadUtilsOnInit （参见 v25 讨论） 这是（惰性）加载包含的 utils.js（以启用格式化/验证等）的一种方法 - 请参阅加载实用程序脚本以获取更多选项。您需要托管 utils.js 文件，然后将 或者，这可以是一个返回 utils 模块承诺的函数。当使用像 Webpack 这样的捆绑器时，这可以用来告诉捆绑器 utils 脚本应该与其余代码保存在单独的文件中。例如： 仅当您初始化插件时才获取脚本，此外，仅当页面完成加载（在窗口加载事件上）时才获取脚本，以防止阻塞（脚本约为 260KB）。实例化插件时，会在 国家模式 仅限国家 占位符数字类型 显示标志 单独的拨号代码 严格模式 使用全屏弹出窗口 utils脚本 此选项已弃用并已重命名为 验证编号类型 在这些示例中， 破坏 获取扩展名 返回一个字符串，例如如果输入值为 获取号码 返回一个字符串，例如 获取号码类型 返回一个整数，您可以将其与枚举 请注意，在美国，无法区分固定电话号码和手机号码，因此它将返回 获取选定国家/地区数据 返回类似这样的内容： 获取验证错误 返回一个整数，您可以将其与枚举 有效号码 返回： isValidNumberPrecise 返回： 设置国家 设置编号 设置占位符数字类型 设置禁用 获取国家数据 返回国家/地区对象数组： 获取实例 loadUtils （参见 v25 讨论） 您可以侦听输入元素上触发的以下事件。 国家变迁 请参阅此处的示例：国家/地区同步 打开：国家/地区下拉菜单 关闭：国家/地区下拉菜单 有很多 CSS 变量可用于主题化。完整列表请参见 intlTelInput.scss。 至于空状态（地球图标），默认版本是深灰色，我们还提供了“浅色”版本，应该与深色主题配合得更好。或者，可以轻松地以主题所需的任何颜色重新生成地球图标。我们建议您以尽可能高的分辨率下载它，然后将图像缩小到所需的尺寸（默认版本为 20 像素宽，@2x 版本为 40 像素宽）。 深色模式示例（如下截图）： 注意：这假设您已经为一般正文/输入样式设置了自己的暗模式样式，例如： 例子： 我们提供 200 多个国家/地区名称以及 30 多种语言的其他用户界面文本（例如国家/地区搜索输入的占位符文本）的翻译。有关如何使用它们的详细信息，请参阅 支持的语言：阿拉伯语、孟加拉语、波斯尼亚语、保加利亚语、加泰罗尼亚语、中文、克罗地亚语、捷克语、丹麦语、荷兰语、挪威语、英语、波斯语、芬兰语、法语、德语、希腊语、印地语、匈牙利语、印度尼西亚语、意大利语、日语、韩语、马拉地语，波兰语，葡萄牙语，罗马尼亚语，俄语，斯洛伐克语，西班牙语，瑞典语，泰卢固语，泰语，土耳其语，乌尔都语，越南语。 如果我们当前不支持您需要的语言，您可以轻松自行贡献 - 您只需提供少量 UI 翻译字符串，因为我们会自动从国家/地区列表项目中提取国家/地区名称。 实用程序脚本 (build/js/utils.js) 是 Google 的 libphonenumber 的自定义构建，它支持以下功能： 国际号码格式化/验证很困难（因国家/地区而异，我们目前支持约 230 个国家/地区）。我们找到的唯一全面的解决方案是 libphonenumber，我们已将相关部分预编译到单个 JavaScript 文件中，并包含在构建目录中。不幸的是，即使修改后，它仍然是~260KB。请参阅下面的部分，了解加载它的最佳方法。 要自己重新编译 utils 脚本（例如，更新构建它的 libphonenumber 版本），请参阅贡献指南。 请参阅 v25 讨论。 utils 脚本提供了许多出色的功能（请参阅上面的部分），但代价是文件大小增加（~260KB）。有两种主要方法来加载 utils 脚本，具体取决于您是否关心文件大小。 选项 1：intlTelInputWithUtils 选项 2：loadUtilsOnInit 或者，您可以将 如果您想要更多地控制何时延迟加载该文件，可以手动调用 全角输入 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属性的对象，以分别指定电话号码和国家/地区代码的隐藏输入的名称。这对于非 Ajax 表单提交非常有用，可确保捕获完整的国际号码和国家/地区代码，特别是在启用nationalMode时。元素内，因为它侦听最近的表单元素上的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 字符串（如下所列）。参见示例。 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" 。该脚本通过动态导入语句加载，这意味着 URL 不能是相对的 - 它必须是绝对的。{ loadUtilsOnInit: () => import("intl-tel-input/utils") } 。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
控制国家/地区列表何时显示为全屏弹出窗口或内嵌下拉菜单。默认情况下，它将在移动设备上显示为全屏弹出窗口（基于用户代理和屏幕宽度），以更好地利用有限的空间（类似于本机工作方式），并作为内联下拉菜单更大的设备/屏幕。在 Storybook 上使用此选项（使用 React 组件）。
类型： String或() => Promise默认值： ""示例： "/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 ( ) ;
"(702) 555-5555 ext. 1234" ，则将返回"1234"
获取给定格式的当前号码（默认为 E.164 标准）。枚举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" ) ;
更改占位符编号类型选项。 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 脚本，以启用格式化/验证等。有关更多信息，请参阅加载实用程序脚本。每个页面只能调用此方法一次。返回一个 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) 国际号码 加载实用程序脚本
如果您不关心文件大小（例如，您延迟加载此脚本），最简单的方法就是使用完整的捆绑包（ /build/js/intlTelInputWithUtils.js ），其中包含 utils 脚本。该脚本的使用方式与主 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" 。loadUtilsOnInit选项设置为一个函数，该函数以 JS 模块对象的形式返回 utils 脚本的承诺。如果您使用 Webpack、Vite 或 Parcel 等捆绑器来构建应用程序，则可以像这样使用它，自动将 utils 分离到不同的捆绑包中： intlTelInput ( htmlInputElement , {
loadUtilsOnInit : ( ) => import ( "intl-tel-input/utils)
});
loadUtils静态方法，而不是使用loadUtilsOnInit 。 故障排除
如果您希望输入为全角，则需要将容器设置为相同，即. 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 后初始化插件。
要自动获取特定于国家/地区的占位符，只需省略上的 placeholder 属性，或将autoPlaceholder设置为"aggressive"以覆盖任何现有占位符，
需要进行一些 CSS 修复才能使插件与 Bootstrap 输入组配合良好。你可以在这里看到 Codepen。
注意：Mobile Safari 目前存在一个错误，当您单击输入组内的下拉箭头（CSS 三角形）时，该错误会导致崩溃。最简单的解决方法是使用以下行删除 CSS 三角形： . iti__arrow { border : none; }
贡献
归因
展开
