Как поместить код набора страны в intlTelInput в скобках
Я использую intlTelInput на моем сайте. Как я могу отделить код набора с помощью скобок. Например вывод этого плагина по умолчанию +1202someNumber и мне нужно (+1)202someNum?
4 ответа
На основании формы документов здесь - 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
Используя 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"
и наконец результат:
mod_number = "(+92) 3162905005"
В этом примере iti относится к экземпляру плагина, который возвращается, когда вы инициализируете плагин, например var iti = intlTelInput(input)
Вы не добавляете телефонный код страны непосредственно к вводу, вы просто прикрепляете его, когда пользователь отправляет форму, или сохраняете его в другой скрытый ввод и прикрепляете его на стороне сервера:
Вы также можете отобразить его пользователям, чтобы они поняли, что им не нужно печатать его при вводе:
https://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/national-mode.html
Просто используйте этот код, чтобы получить код страны с номера телефона:
Ты можешь использовать 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);
Это даст вам код страны
пример:
$("#your input box id").intlTelInput("getSelectedCountryData")
// this give you object where dialCode property has country code,like below
$("#ContactpermanentNumber").intlTelInput("getSelectedCountryData").dialCode