使用 intlTelInput.js 为多个电话号码输入框独立添加国家代码

本教程详细介绍了如何在使用 intlTelInput.js 库时，为网页上多个电话号码输入框独立地添加和管理国家代码。通过引入父级容器的特定类名并结合精确的 jQuery 选择器，可以有效解决因通用选择器导致的交互冲突，确保每个输入框在用户点击国家旗帜时都能正确地更新其对应的国家代码，实现模块化和独立的功能。

概述与挑战

在现代网页表单设计中，为电话号码输入框添加国际区号选择功能已成为常见需求。intltelinput.js 是一个功能强大的 javascript 插件，能够轻松实现这一目标。然而，当页面上存在多个需要独立操作的电话号码输入框时，开发者常会遇到一个问题：点击一个输入框的国旗图标，其行为却意外地影响了其他输入框，或者国家代码无法正确地应用到对应的输入框上。这通常是由于使用了过于宽泛的 dom 选择器导致的。

本教程将展示如何通过精确的元素选择和事件绑定，确保每个 intlTelInput 实例都能独立运行，互不干扰。

环境准备

为了使用 intlTelInput.js 库并实现本教程的功能，您需要引入以下 CSS 和 JavaScript 文件。建议使用 CDN 链接以简化设置，或者根据您的项目结构引入本地文件。

<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.17/css/intlTelInput.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.17/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>

HTML 结构设计

为了实现对不同输入框的精确控制，我们为每个 form-group 容器添加一个唯一的类名（例如 smsForm 和 whatsappForm）。这些类名将作为后续 JavaScript 中选择器的作用域，确保事件监听器只作用于其对应的输入框。

<div class="form-row">
<div class="form-group col-md-6 smsForm">
<label for="smsno">SMS No.</label>
<input type="tel" class="form-control" name="smsno" id="smsno" placeholder="Type contact1 number here...." pattern="[7-9]{1}[0-9]{9}" required />
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please enter valid contact no.</div>
</div>
<div class="form-group col-md-6 whatsappForm">
<label for="whtspno">WhatsApp No.</label>
<input type="text" class="form-control" name="whtspno" id="whtspno" placeholder="Type contact2 number here...." pattern="[7-9]{1}[0-9]{9}" required />
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please enter valid contact no.</div>
</div>
</div>

JavaScript 实现

关键在于初始化 intlTelInput 实例以及处理国旗点击事件。

1. 初始化 intlTelInput 实例

针对每个电话号码输入框，我们需要独立地初始化 intlTelInput 库。这通过 window.intlTelInput() 函数实现，传入对应的 DOM 元素作为参数。

const phoneInputField = document.querySelector("#smsno");
const phoneInputField2 = document.querySelector("#whtspno");
// 初始化第一个输入框的 intlTelInput
const phoneInput = window.intlTelInput(phoneInputField, {});
// 初始化第二个输入框的 intlTelInput
const phoneInput2 = window.intlTelInput(phoneInputField2, {});

2. 处理国旗点击事件

最初的问题在于，如果使用 $ (‘.iti__flag-container’).click() 这样的通用选择器，它会捕获页面上所有 intlTelInput 实例的国旗容器点击事件，导致逻辑混淆。为了解决这个问题，我们将事件监听器绑定到每个输入框的特定父级容器内的国旗容器上。

通过 $(‘.smsForm .iti__flag-container’) 和 $(‘.whatsappForm .iti__flag-container’) 这样的选择器，我们确保了点击事件只在对应的输入框上下文中触发。

$(document).ready(function() {
// 监听第一个输入框（SMS No.）的国旗点击事件
$('.smsForm .iti__flag-container').click(function() {
// 获取当前选中旗帜的 title 属性，其中包含国家代码
var countryCode = $('.smsForm .iti__selected-flag').attr('title');
// 从 title 中提取纯数字的国家代码
countryCode = countryCode.replace(/[^0-9]/g,'');
// 清空输入框并预填充国家代码
$('#smsno').val(""); // 先清空，避免重复添加
$('#smsno').val("+" + countryCode + " " + $('#smsno').val());
});
// 监听第二个输入框（WhatsApp No.）的国旗点击事件
$('.whatsappForm .iti__flag-container').click(function() {
// 获取当前选中旗帜的 title 属性
var countryCode = $('.whatsappForm .iti__selected-flag').attr('title');
// 从 title 中提取纯数字的国家代码
countryCode = countryCode.replace(/[^0-9]/g,'');
// 清空输入框并预填充国家代码
$('#whtspno').val(""); // 先清空，避免重复添加
$('#whtspno').val("+" + countryCode + " " + $('#whtspno').val());
});
});

3. 完整的 JavaScript 代码

结合上述初始化和事件处理逻辑，以及可选的表单验证代码，完整的 JavaScript 代码如下：

// 页面加载完成后执行
window.addEventListener('load', function() {
// 获取所有需要验证的表单
var forms = document.getElementsByClassName('needs-validation');
// 遍历并阻止表单的默认提交行为，添加验证样式
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
// 初始化 intlTelInput 实例
const phoneInputField = document.querySelector("#smsno");
const phoneInputField2 = document.querySelector("#whtspno");
const phoneInput = window.intlTelInput(phoneInputField, {});
const phoneInput2 = window.intlTelInput(phoneInputField2, {});
// DOM 准备就绪后执行
$(document).ready(function() {
// 监听第一个输入框（SMS No.）的国旗点击事件
$('.smsForm .iti__flag-container').click(function() {
var countryCode = $('.smsForm .iti__selected-flag').attr('title');
countryCode = countryCode.replace(/[^0-9]/g,'');
$('#smsno').val("");
$('#smsno').val("+" + countryCode + " " + $('#smsno').val());
});
// 监听第二个输入框（WhatsApp No.）的国旗点击事件
$('.whatsappForm .iti__flag-container').click(function() {
var countryCode = $('.whatsappForm .iti__selected-flag').attr('title');
countryCode = countryCode.replace(/[^0-9]/g,'');
$('#whtspno').val("");
$('#whtspno').val("+" + countryCode + " " + $('#whtspno').val());
});
});

注意事项与总结

1. 选择器精确性：本教程的核心在于使用精确的 jQuery 选择器（如 .smsForm .iti__flag-container）来定位特定的 intlTelInput 实例内部的元素。这是解决多个实例冲突的关键。避免使用 $(‘.iti__flag-container’) 这样的通用选择器，因为它会匹配页面上所有匹配的元素。
2. HTML 结构：为每个电话号码输入框的父级容器添加唯一的类名（如 smsForm 和 whatsappForm）是实现精确选择器的基础。
3. 国家代码提取：通过读取 .iti__selected-flag 元素的 title 属性来获取国家代码，并使用正则表达式 replace(/[^0-9]/g,”) 清理掉非数字字符，确保只得到纯粹的数字代码。
4. 输入框更新：在更新输入框的值时，先清空再添加国家代码 ($(‘#smsno’).val(“”); $(‘#smsno’).val(“+” + countryCode + ” ” + $(‘#smsno’).val());) 可以避免重复添加或格式错误。
5. 依赖管理：确保所有必要的库文件（jQuery, Bootstrap, intlTelInput.js）都已正确引入，并且加载顺序正确。jQuery 应在 intlTelInput.js 之前加载。

通过遵循本教程的方法，您可以在一个页面上成功管理多个独立的 intlTelInput.js 实例，为用户提供清晰、无干扰的电话号码输入体验。