本文详细介绍了在使用 intlTelInput.js 库时，如何为网页中多个电话号码输入框独立地添加和管理国家代码。通过为每个输入框的父容器添加唯一类名，并利用这些类名作为选择器，可以确保点击国旗时，国家代码只影响对应的输入字段，从而解决多个 intlTelInput 实例相互干扰的问题，实现精确控制和独立操作。
概述
在web开发中，处理国际电话号码输入通常会借助 intltelinput.js 这样的库，它能提供国旗选择、自动格式化和验证等功能。然而，当页面上存在多个电话号码输入框时，如何确保每个输入框在用户选择国家时独立更新其国家代码，而不是相互影响，是一个常见的问题。本文将提供一个使用javascript和jquery的解决方案，通过为每个 intltelinput 实例的容器添加特定类名，实现精确控制。
核心问题与解决方案
原始问题在于，如果使用一个通用的选择器（如 $(‘.iti__flag-container’).click()）来监听国旗容器的点击事件，那么无论点击哪个输入框的国旗，事件都会触发并尝试更新所有或不明确的输入框，导致行为混乱。
解决方案的关键在于：为每个 intlTelInput 实例的父容器添加一个唯一的标识类，然后使用这个类作为jQuery选择器的一部分，精确地定位到对应输入框的国旗容器和目标输入框。
实施步骤
1. HTML 结构准备
首先，确保你的HTML结构为每个电话号码输入框及其相关的 intlTelInput 元素提供了一个可区分的父容器。在本例中，我们为 form-group 元素添加了 smsForm 和 whatsappForm 类。
Valid.Please enter valid contact no.Valid.Please enter valid contact no.
说明：
立即学习“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");// 为每个输入框独立初始化 intlTelInputconst 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，也适用于任何需要在页面上独立控制多个相同组件实例的场景。
以上就是如何使用JavaScript和jQuery为多个输入字段独立添加国家代码的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1570937.html
微信扫一扫 
支付宝扫一扫 
