How to put country dial code in intlTelInput in brackets

问题

I'm using intlTelInput on my site. How can I separate dial code using brackets. For ex. default output of this plugin is +1202someNumber and I need (+1)202someNum?

回答1:

Based on the docs form here - https://github.com/jackocnr/intl-tel-input - you would need something like this:

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

回答2:

Just use this code to get country code from phone number:

You can use var getCode = telInput.intlTelInput('getSelectedCountryData').dialCode;

Here is demo: 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);

回答3:

You don't add the country phone code directly to the input, you just attache it when the user submit the form or save it in another hidden input and attache it on you server side:

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

You can also display it to the users so they will understand they don't need to type it when they typing:

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

回答4:

this give you country code

exmaple :

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

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

$("#ContactpermanentNumber").intlTelInput("getSelectedCountryData").dialCode

来源：https://stackoverflow.com/questions/42982494/how-to-put-country-dial-code-in-intltelinput-in-brackets

标签

jquery

intl-tel-input