本文详细介绍了在使用 intlTelInput.JS 库时，如何为网页中多个电话号码输入框独立地添加和管理国家代码。通过为每个输入框的父容器添加唯一类名，并利用这些类名作为选择器，可以确保点击国旗时，国家代码只影响对应的输入字段，从而解决多个 intlTelInput 实例相互干扰的问题，实现精确控制和独立操作。
概述
在web开发中，处理国际电话号码输入通常会借助 intltelinput.js 这样的库，它能提供国旗选择、自动格式化和验证等功能。然而，当页面上存在多个电话号码输入框时，如何确保每个输入框在用户选择国家时独立更新其国家代码，而不是相互影响，是一个常见的问题。本文将提供一个使用JavaScript和jquery的解决方案，通过为每个 intltelinput 实例的容器添加特定类名，实现精确控制。
核心问题与解决方案
原始问题在于，如果使用一个通用的选择器（如 $(‘.iti__flag-container’).click()）来监听国旗容器的点击事件，那么无论点击哪个输入框的国旗，事件都会触发并尝试更新所有或不明确的输入框，导致行为混乱。
解决方案的关键在于：为每个 intlTelInput 实例的父容器添加一个唯一的标识类，然后使用这个类作为jQuery选择器的一部分，精确地定位到对应输入框的国旗容器和目标输入框。
实施步骤
1. html 结构准备
首先，确保你的HTML结构为每个电话号码输入框及其相关的 intlTelInput 元素提供了一个可区分的父容器。在本例中，我们为 form-group 元素添加了 smsForm 和 whatsappForm 类。
<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"/> <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> <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>
说明：
立即学习“Java免费学习笔记（深入）”；
- smsForm 和 whatsappForm 类被添加到各自输入框的父 div (form-group) 上。
- 引入了 intlTelInput.css、bootstrap.min.css、jquery.min.js、intlTelInput.min.js 和 bootstrap.min.js 等必要库。
2. JavaScript/jQuery 逻辑
接下来是核心的JavaScript和jQuery代码，它负责初始化 intlTelInput 并处理国旗点击事件。
// 初始化 intlTelInput 实例 const phoneInputField = document.querySelector("#smsno"); const phoneInputField2 = document.querySelector("#whtspno"); // 为每个输入框独立初始化 intlTelInput const phoneInput = window.intlTelInput(phoneInputField, {}); const phoneInput2 = window.intlTelInput(phoneInputField2, {}); // 页面加载时的表单验证逻辑（如果需要） 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); // 使用 jQuery 监听国旗点击事件 $(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()); }); });
代码解释：
-
intlTelInput 初始化：
- document.querySelector(“#smsno”) 和 document.querySelector(“#whtspno”) 分别获取两个输入框的dom元素。
- window.intlTelInput(phoneInputField, {}); 为每个DOM元素独立地初始化 intlTelInput 库。这是实现独立行为的基础。
-
国旗点击事件处理：
- $(document).ready(function() { … }); 确保DOM完全加载后再执行jQuery代码。
- $(‘.smsForm .iti__flag-container’).click(function() { … }); 和 $(‘.whatsappForm .iti__flag-container’).click(function() { … }); 是关键所在。它们使用前面HTML中添加的唯一类名（smsForm 和 whatsappForm）作为前缀，确保只监听对应输入框内部的 iti__flag-container 元素的点击事件。
- 在事件处理函数内部：
- $(‘.smsForm .iti__selected-flag’).attr(‘title’) （或 $(‘.whatsappForm .iti__selected-flag’).attr(‘title’)）获取当前被选中国旗的 title 属性。intlTelInput 库会将国家名称和国家代码（例如：”United States: +1″）放入这个属性中。
- countryCode.replace(/[^0-9]/g,”) 使用正则表达式移除非数字字符，只保留国家代码的数字部分。
- $(‘#smsno’).val(“”); （或 $(‘#whtspno’).val(“”);）首先清空目标输入框的当前值。
- $(‘#smsno’).val(“+” + countryCode + ” ” + $(‘#smsno’).val()); （或 $(‘#whtspno’).val(…)）将提取到的国家代码前加上 + 号和空格，然后设置到对应的输入框中。
注意事项与最佳实践
- 选择器精度： 使用父容器的唯一类名来限定选择器 (.parentClass .childClass) 是处理多个相同组件实例的有效方法。这比使用 :eq() 索引选择器更具可读性和维护性，因为元素的顺序可能会改变。
- 代码位置： 确保 intlTelInput.js 和 jQuery 库在你的自定义脚本之前加载。
- 初始值处理： 在设置国家代码前清空输入框 (.val(“”)) 是为了避免重复添加或与用户已输入的内容混淆。如果你的业务逻辑要求保留用户输入并仅在前面添加国家代码，需要调整这部分逻辑。
- 表单验证： 示例代码中包含了一个基本的Bootstrap表单验证逻辑。确保它与你的 intlTelInput 集成良好，并考虑如何验证带有国家代码的完整电话号码。
- 用户体验： 考虑在用户选择国家后，输入焦点是否应自动转移到号码输入部分，以及如何处理用户手动输入国家代码的情况。intlTelInput 库本身提供了许多API来获取和设置号码信息，可以进一步探索。
总结
通过为 intlTelInput 实例的父容器添加唯一的标识类，并利用这些类名来构建精确的jQuery选择器，我们可以轻松地管理页面上的多个电话号码输入框，确保每个实例都能独立响应用户操作，从而提供更稳定和用户友好的体验。这种方法不仅适用于 intlTelInput，也适用于任何需要在页面上独立控制多个相同组件实例的场景。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
