javascript - 使用 intlTelInput 获取完整号码

Question

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

我可以使用以下方法获取拨号代码

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

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

Answer 1

使用该getnumber选项，因此在您的情况下：

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

^ 这将为您提供整个号码（国家代码 + 电话号码）

请参阅此处的文档。

Answer 2

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

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

    });

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

然后你可以通过使用得到完整的号码

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

Answer 3

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)

Answer 4

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

 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);

Answer 5

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

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