使用 jquery 获取带有国家/地区代码的国际电话输入值

Question

我正在尝试通过国家/地区代码获取价值。https://www.jqueryscript.net/form/jQuery-International-Telephone-Input-With-Flags-Dial-Codes.html我正在关注这个。

但我无法实现如何通过国家代码获取值的功能。

假设我的输入元素是这样的。

<input type="phone_number" name="phone_no" value="" placeholder="Phone No" class="input form-control" autocomplete="off">

我确实初始化了插件

(async () => {
  let phoneNumberField = $('input[type=phone_number]');
  let isPhoneNumberFieldExist = phoneNumberField.length;
  if (isPhoneNumberFieldExist) {
    phoneNumberField.intlTelInput({
     
    });
  }
})();

现在，当我提交表格时，我也收到了上述电话号码元素。

console.log(el); //will log the same above element 
console.log(el.value) // will log the number in input box

但我无法通过国家代码获得价值。我尝试使用链接指南中给出的实例变量。也尝试过使用这个

console.log( $(el).intlTelInput().getNumber());

但似乎没有任何作用。任何人都可以帮助我如何通过国家/地区代码获取价值吗？

Answer 1

您可以使用intlTelInput('getSelectedCountryData').dialCode从下拉列表中选择国家/地区代码。

演示代码：

var instance = $("[name=phone_no]")
instance.intlTelInput();

$("[name=phone_no]").on("blur", function() {
  console.log($(this).val())
  console.log(instance.intlTelInput('getSelectedCountryData').dialCode) //get counrty code
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/css/intlTelInput.css" integrity="sha512-gxWow8Mo6q6pLa1XH/CcH8JyiSDEtiwJV78E+D+QP0EVasFs8wKXq16G8CLD4CJ2SnonHr4Lm/yY2fSI2+cbmw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/intlTelInput-jquery.min.js" integrity="sha512-QK4ymL3xaaWUlgFpAuxY+6xax7QuxPB3Ii/99nykNP/PlK3NTQa/f/UbQQnWsM4h5yjQoMjWUhCJbYgWamtL6g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<input type="phone_number" name="phone_no" value="" placeholder="Phone No" class="input form-control" autocomplete="off">