Как указать телефонный код страны в intlTelInput в скобках

Я использую intlTelInput на своем сайте. Как разделить код набора скобками. Например, по умолчанию этот плагин выводит + 1202someNumber, и мне нужно (+1) 202someNum?


jquery intl-tel-input
person Pawel Novikov    schedule 23.03.2017    source источник
comment
Можете ли вы создать для этого скрипт Js? Нам также нужно будет проверить плагин telinput, чтобы увидеть, есть ли в нем какая-либо информация в функциях, которая поможет нам узнать, нужно ли обрезать строку.   -  person Manuel Cheța    schedule 23.03.2017
comment
это официальная страница этого проекта - intl-tel-input.com   -  person Pawel Novikov    schedule 23.03.2017

Ответы (5)


arrow_upward
11
arrow_downward

На основе формы документации здесь - https://github.com/jackocnr/intl-tel-input - вам понадобится что-то вроде этого:

var intlNumber = $("#phone").intlTelInput("getNumber"); // get full number eg +17024181234
var countryData = $("#phone").intlTelInput("getSelectedCountryData"); // get country data as obj 

 var countryCode = countryData.dialCode; // using updated doc, code has been replaced with dialCode
countryCode = "+" + countryCode; // convert 1 to +1

var newNo = intlNumber.replace(countryCode, "(" + coountryCode+ ")" ); // final version
person Manuel Cheța    schedule 23.03.2017

arrow_upward
1
arrow_downward

Просто используйте этот код, чтобы получить код страны с номера телефона:

Вы можете использовать var getCode = telInput.intlTelInput('getSelectedCountryData').dialCode;

Вот демонстрация: https://output.jsbin.com/cuvoqagotu

https://jsbin.com/cuvoqagotu/edit?html,css,js

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/css/intlTelInput.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/js/intlTelInput.min.js"></script>
<style>
 .hide {
    display: none;
 }
</style>
</head>
<body>
<input id="phone" type="tel">
<span id="valid-msg" class="hide">? Valid</span>
<span id="error-msg" class="hide">Invalid number</span>
</body>
</html>

JS:

var telInput = $("#phone"),
  errorMsg = $("#error-msg"),
  validMsg = $("#valid-msg");

// initialise plugin
telInput.intlTelInput({
utilsScript:"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.4/js/utils.js"
});

var reset = function() {
  telInput.removeClass("error");
  errorMsg.addClass("hide");
  validMsg.addClass("hide");
};

// on blur: validate
telInput.blur(function() {
  reset();
  if ($.trim(telInput.val())) {
    if (telInput.intlTelInput("isValidNumber")) {
      validMsg.removeClass("hide");
      /* get code here*/
      var getCode = telInput.intlTelInput('getSelectedCountryData').dialCode;
      alert(getCode);
    } else {
      telInput.addClass("error");
      errorMsg.removeClass("hide");
    }
  }
});

// on keyup / change flag: reset
telInput.on("keyup change", reset);
person Chandra Kumar    schedule 01.08.2017

arrow_upward
0
arrow_downward

Вы не добавляете телефонный код страны непосредственно во ввод, вы просто прикрепляете его, когда пользователь отправляет форму, или сохраняете его в другом скрытом вводе и прикрепляете его на стороне сервера:

https://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/hidden-input.html?phone=32445&phone-full=%2B132445

Вы также можете показать его пользователям, чтобы они понимали, что им не нужно вводить его, когда они набирают:

https://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/national-mode.html

person Roy Shoa    schedule 27.07.2017

arrow_upward
0
arrow_downward

это даст вам код страны

пример:

$("#your input box id").intlTelInput("getSelectedCountryData")

// this give you object where dialCode property has country code,like below 

$("#ContactpermanentNumber").intlTelInput("getSelectedCountryData").dialCode
person ravi kumar    schedule 16.03.2018

arrow_upward
0
arrow_downward

Используя vanilla JS, вы можете попробовать следующее:

var country_code = iti.getSelectedCountryData()["dialCode"];
var number_with_code = iti.getNumber();
var mod_number = "(" + number_with_code.substr(0, country_code.length + 1) + ")" + number_with_code.substr(country_code.length + 1);

В первой строке выбирается код страны. Вторая строка содержит полный номер вместе с кодом страны.

Допустим, пользователь вводит следующий номер:

+921234567890

Затем следуют значения переменных:

country_code = 92

number_with_code = +923162905005

и наконец результат:

номер модуля = (+92) 3162905005

В этом примере iti относится к экземпляру плагина, который возвращается, когда вы инициализируете плагин, например. var iti = intlTelInput(input)

person Hatim    schedule 10.08.2020