在前端开发过程中，我们通常需要处理各种输入框，其中包括手机号码输入框。 然而，由于全球不同国家和地区的电话号码命名规则不同，处理这些输入框可能会变得困难和繁琐。为了解决这个问题，我们可以使用 intl-tel-input-boegebjerg 这个 npm 包，在输入电话号码的过程中，自动判断输入的号码是否符合当前区域的号码规则。
intl-tel-input-boegebjerg 概览
intl-tel-input-boegebjerg 是一个非常流行的 npm 包，它提供了一个美观的国际电话输入框组件，可以自动处理电话号码的格式和验证，让开发者轻松实现跨国际电话输入框。 以下是几个重要的特性：
- 自动设置默认国家和区域，根据用户IP地址自动检测当前用户所在的国家或者地区
- 可以通过国旗图标或者下拉列表，让用户选择自己的国家和地区
- 支持定制选项，比如隐藏国旗图标、将下拉列表固定在输入框上面等等
- 支持输入框的响应式布局，在不同的设备上保持一致的样式和布局
使用步骤
接下来，我们将介绍具体的使用步骤，以及如何将这个国际电话输入框集成到你的前端项目中。
安装
要使用此包，必须先安装它。 使用以下命令来安装 intl-tel-input-boegebjerg：
npm install --save intl-tel-input-boegebjerg
引用
你可以使用以下命令，引入 intl-tel-input-boegebjerg。
// 引入 intl-tel-input-boegebjerg.js import intlTelInput from 'intl-tel-input-boegebjerg'; // 引入 intl-tel-input-boegebjerg.css import 'intl-tel-input-boegebjerg/build/css/intlTelInput.min.css';
初始化
在html代码中，创建一个input标签，并设置id属性：
<input type="tel" id="phone"/>
在初始化时，编写以下 JavaScript 代码。 在这里，我们将 targetElement 设置为上面创建的input标签 ID（即“phone”）。
var input = document.querySelector("#phone");
intlTelInput(input);这将使用 intl-tel-input-boegebjerg 的默认选项初始化输入框，用户只需输入手机号码，即会自动验证和格式化输入。
参数设置
除此以外，你还可以通过指定自定义的选项来更好地控制输入框的行为。
首先，你可以指定输入框的国家和地区：
-- -------------------- ---- -------
------------------- -
--------------- -------
------------ ------------------ -
------------------------- ---------- --- ------------------------------ -
--- ----------- - ----- -- ------------- - ------------ - ---
----------------------
---
--
---在这里，我们将 initialCountry 设置为“auto”，由 intl-tel-input-boegebjerg 根据用户的 IP 地址自动选择国家和地区。 此外，我们构建了一个 ajax 请求，来获取用户所在的国家码。
然后，你可以自定义其它选项：
intlTelInput(input, {
onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
preferredCountries: ['us', 'ca', 'do'],
nationalMode: true,
formatOnDisplay: false,
separateDialCode: true,
});在这里，我们指定 onlyCountries 仅包含美国、英国、瑞士、加拿大和多米尼加，同时指定 preferredCountries 为美国、加拿大和多米尼加共和国。 我们将 nationalMode 设置为 true，以便仅接受本地格式的电话号码。 我们禁用了 formatOnDisplay，这意味着数字将被保留为用户输入的原始字符串，并使用 separateDialCode 将国际区号与电话号码分开显示。
事件监听
还有一些事件可以侦听，可以在以下情况下发生：
- 现在，当用户输入时的转换电话格式。
- 当用户使用键盘移动光标。
我们可以监听这些事件并从中获取所需的信息：
input.addEventListener("countrychange", function() {
console.log("Country: " + iti.getSelectedCountryData().name);
console.log("Full number: " + iti.getNumber());
console.log("Country code: " + iti.getSelectedCountryData().dialCode);
console.log("Number extension: " + iti.getExtension());
});在这里，我们监听了 countrychange 事件，并从 iti 对象中检索当前选定的国家和地区、电话号码以及国际区号扩展名。
动态更新选项
你还可以的通过 jQuery 更新选项：
-- -------------------- ---- -------
--- ----- - ------------
--- --- - ------------------- -
--------------- -------
------------ ------------------ -
------------------------- ---------- --- ------------------------------ -
--- ----------- - ----- -- ------------- - ------------ - ---
----------------------
---
--
---
-- ------
----------------
-------------- ------ ----- ----- ----- ------
------------------- ------ ----- ------
------------- -----
---------------- ------
----------------- -----
---在这里，我们将 initialCountry 设置为“auto”，以启用默认自动选择标记，然后使用 setOptions 更新了 iti 对象的默认选项。
示例代码
最后，我们提供一个示例代码，以帮助你更好地理解 intl-tel-input-boegebjerg 的使用方法：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------------- ------------
----- ---------------- ---------------------------------------------------------------------------------------- --
------- ---------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------------
-------
------
---- ----- ---
------ ---------- ---------- --
---- ------ ---
------- -----------------------
-- -----
--- ----- - ------------
--- --- - ------------------- -
--------------- -------
------------ ------------------ -
------------------------- ---------- --- ------------------------------ -
--- ----------- - ----- -- ------------- - ------------ - ---
----------------------
---
--
---
-- ------
----------------
-------------- ------ ----- ----- ----- ------
------------------- ------ ----- ------
------------- -----
---------------- ------
----------------- -----
---
-- -- ------------------- -----------
------------------------- ---------- -
--------------------- - - -----------------------------------
----------------- ------- - - -----------------
-------------------- ----- - - ---------------------------------------
------------------- ---------- - - --------------------
---
---------
-------
-------结论
使用 intl-tel-input-boegebjerg 可以大大简化电话号码的输入和验证，减少了出现验证错误的机会。 通过自动检测本地电话号码格式，intl-tel-input-boegebjerg 组件可以确保电话号码总是符合当前国家或地区的号码规则。 它是强大且易于使用的 npm 包，无论是用于个人还是商业项目，都是非常有价值的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056b4581e8991b448e5463