intlTelInput重新实例化调用getNumber()丢失拨号代码问题求助

问题原因 #

第二次调用window.intlTelInput(document.querySelector("#myNumber"))时，相当于创建了一个新的实例，而且没有传入初始化时的separateDialCode: true配置。新实例使用默认设置，所以调用getNumber()不会返回IDD国家代码。

解决办法 #

方法1：直接获取已挂载的实例（推荐）

intlTelInput会把初始化后的实例挂载到目标DOM元素上，直接通过元素获取实例即可：

document.querySelector("#myNumber").intlTelInput.getNumber();

方法2：重复初始化时传入相同配置

如果必须重新调用构造函数，要确保传入和第一次完全一致的配置，这样新实例的行为才会和原实例一致：

window.intlTelInput(document.querySelector("#myNumber"), {
    separateDialCode: true,
    utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.11/build/js/utils.js"
}).getNumber();

注意：重复初始化可能会触发组件重新渲染，产生不必要的性能开销，优先用方法1。

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