如何在intl-tel-input多同class实例中调用getNumber()

问题描述 #

我在应用中使用intl-tel-input帮助用户输入有效的国家代码。单个带唯一ID的实例初始化和数据提取均正常，但在处理多个使用同一class的实例时遇到问题：已成功初始化多个实例，却无法正确调用getNumber()获取任意或所有实例的号码。

原代码示例：

var input = document.querySelector("#phone");
var justPhone = window.intlTelInput(input, {
  separateDialCode: true,
  autoPlaceholder: false,
  utilsScript:
    "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.3/build/js/utils.js"
});

function getValue() {
  var number = justPhone.getNumber();
  alert(number);
}

// multiple variables

let ary = Array.prototype.slice.call(document.querySelectorAll(".phone"));
ary.forEach(function (el) {
  PhoneDisplay(el);
});
function PhoneDisplay(ary) {
  var iti = window.intlTelInput(ary, {
    separateDialCode: true,
    autoPlaceholder: false,
    utilsScript:
      "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.3/build/js/utils.js"
  });
}

function getValues() {
  var x = iti.getNumber();
  alert(x);
  //alert("how do I get these values?");
  // ??
}

问题根源 #

• 初始化多实例时，iti是PhoneDisplay函数的局部变量，外部作用域无法访问
• 调用getValues时，找不到有效的实例对象来执行getNumber()方法

解决方案 #

方案1：用数组存储所有实例（适合批量操作） #

将每个初始化后的实例存入全局数组，后续通过数组遍历获取所有号码：

// 全局数组存储所有多实例
const phoneInstances = [];

// 单个实例初始化（保留原有逻辑）
var input = document.querySelector("#phone");
var justPhone = window.intlTelInput(input, {
  separateDialCode: true,
  autoPlaceholder: false,
  utilsScript:
    "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.3/build/js/utils.js"
});

function getValue() {
  var number = justPhone.getNumber();
  alert(number);
}

// 多实例初始化
let ary = Array.prototype.slice.call(document.querySelectorAll(".phone"));
ary.forEach(function (el) {
  const iti = window.intlTelInput(el, {
    separateDialCode: true,
    autoPlaceholder: false,
    utilsScript:
      "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.3/build/js/utils.js"
  });
  // 将实例存入数组
  phoneInstances.push(iti);
});

// 获取所有多实例的号码
function getValues() {
  // 遍历数组，收集所有号码
  const allNumbers = phoneInstances.map(instance => instance.getNumber());
  alert("所有号码：" + allNumbers.join(", "));
  
  // 如需获取单个实例，比如第一个
  // const firstNumber = phoneInstances[0].getNumber();
  // alert(firstNumber);
}

方案2：将实例挂载到DOM元素（适合按需获取单个实例） #

把实例直接绑定到对应的输入框DOM元素上，后续通过DOM元素找到实例：

// 单个实例初始化（保留原有逻辑）
var input = document.querySelector("#phone");
var justPhone = window.intlTelInput(input, {
  separateDialCode: true,
  autoPlaceholder: false,
  utilsScript:
    "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.3/build/js/utils.js"
});

function getValue() {
  var number = justPhone.getNumber();
  alert(number);
}

// 多实例初始化
let ary = Array.prototype.slice.call(document.querySelectorAll(".phone"));
ary.forEach(function (el) {
  const iti = window.intlTelInput(el, {
    separateDialCode: true,
    autoPlaceholder: false,
    utilsScript:
      "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.3/build/js/utils.js"
  });
  // 将实例挂载到DOM元素上
  el.itiInstance = iti;
});

// 获取单个实例的号码（比如绑定到对应按钮的点击事件）
function getSinglePhoneValue(inputEl) {
  const number = inputEl.itiInstance.getNumber();
  alert(number);
}

// 获取所有多实例的号码
function getAllPhoneValues() {
  const allNumbers = [];
  document.querySelectorAll(".phone").forEach(el => {
    allNumbers.push(el.itiInstance.getNumber());
  });
  alert("所有号码：" + allNumbers.join(", "));
}

关键说明 #

• getNumber()是intl-tel-input的实例方法，必须通过初始化后的实例对象调用
• 两种方案按需选择：数组存储适合批量处理所有实例，DOM挂载适合单独操作某一个实例
• 避免重复初始化同一个DOM元素，否则会导致实例覆盖或混乱

内容的提问来源于stack exchange，提问作者Neilb