使用 intlTelInput 获取完整号码

Posted

技术标签:

【中文标题】使用 intlTelInput 获取完整号码【英文标题】:Get the full number using intlTelInput 【发布时间】:2018-03-21 17:35:20 【问题描述】:

我正在使用 here 提供的 intlTelInput 的演示代码

我可以通过以下方式获取拨号代码

var intlNumber = $("#phone").intlTelInput("getSelectedCountryData");

但我无法从#phone 文本框中获取完整号码,即“拨号代码 + 用户输入的号码”。

【问题讨论】:

【参考方案1】:

使用getnumber 选项,所以在你的情况下:

var intlNumber = $("#phone").intlTelInput("getNumber");

^ 这将为您提供完整的号码(国家代码 + 电话号码)

在此处查看docs。

【讨论】:

【参考方案2】:

您必须使用内置方法来获取完整号码,但您必须添加 utilsScript

 $("#phone").intlTelInput(
     
      //Other configurations,
      //Other configurations,
      utilsScript : "/path/to/build/utils.js",

    );

在 intlTelInput 的初始化中如此处所述Intl-Tel-Phone Docs

然后你可以通过使用得到完整的数字

$("#YourInputElementID").intlTelInput("getNumber");

【讨论】:

【参考方案3】:

使用 ajax 提交表单。 这对我有用。 我添加了hiddenInput : "full_phone",并将intlTelInput.js文件中的偶数监听器从"submit"更改为"change"

 var iti = document.querySelector("#phone");
  window.intlTelInput(iti, 
    separateDialCode: true,
    hiddenInput : "full_phone",
    utilsScript: "../../build/js/utils.js",
  );

intlTelInput.js 文件中

 if (this.telInput.form) this.telInput.form.addEventListener("change", this._handleHiddenInputSubmit);

【讨论】:

【参考方案4】:

full_phone 会成功的。 提交表单时,它会附加一个带有完整数字的隐藏字段。

var input = document.querySelector("#phone");
window.intlTelInput(input, 
    hiddenInput: "full_phone",
    utilsScript: "../../build/js/utils.js" 
);

更新: 如果上述技巧不起作用,请不要担心,您可以通过在电话输入字段之前放置一个隐藏的输入字段来修复它。

HTML:

var input = document.querySelector("#phone"),
  hidden= document.querySelector("#hidden");

var iti = window.intlTelInput(input, 
  nationalMode: true,
  utilsScript: "../../build/js/utils.js" 
);

var handleChange = function() 
hidden.value = iti.getNumber()
;

// 听“keyup”,当用户选择国家时也会“change”更新

input.addEventListener('change', handleChange);
input.addEventListener('keyup', handleChange)

【讨论】:

【参考方案5】:

另一种选择是简单地使用 getInstance 然后 getNumber

var input = document.querySelector("#phone"),
window.intlTelInput(input, 
      utilsScript : "/path/to/build/utils.js",
  );
window.intlTelInputGlobals.getInstance(input).getNumber();

【讨论】:

以上是关于使用 intlTelInput 获取完整号码的主要内容,如果未能解决你的问题,请参考以下文章

我们正在使用 Lync SDK 获取联系信息,但无法返回完整的电话号码列表

无法集成 intl-tel-input - window.intlTelInput 不是函数

SMS 未使用 Branch.io 和 intl-tel-input 发送到国际号码

如何解决因缓存引起的SAP号码段跳号

如何使用 webworks 在 Blackberry 10 设备中获取 IMEI 号码?

使用电话号码获取联系人姓名