intl-tel-input

A jQuery plugin for entering international telephone numbers

How to use?

Copy-paste the following <link> near the end of your pages under Nayzak Plugins SCSS to enable it.

              
                <link href="assets/plugins/intl-tel-input/sass/intlTelInput.scss" rel="stylesheet" type="text/css" media="all">

Copy-paste the following <script> near the end of your pages under Nayzak Javascript Plugins to enable it.

              
                <script src="assets/plugins/intl-tel-input/intlTelInput.min.js"></script>
                <script src="assets/plugins/intl-tel-input/utils.js"></script>

Initialize intl-tel-input

Finally, we need to initialize intl-tel-input in JS:

              
                <script>
                  // Intl Tel Input JavaScript
                  var input = document.querySelector(".country-phone");
                  window.intlTelInput(input, {
                  separateDialCode: true,
                  customPlaceholder: function (
                  selectedCountryPlaceholder,
                  selectedCountryData
                  ) {
                  return "e.g. " + selectedCountryPlaceholder;
                  },
                  });
                  var iti = window.intlTelInputGlobals.getInstance(input);
                  input.addEventListener('input', function() {
                  var countryName = iti.getSelectedCountryData().name;
                  document.getElementById('country').value = countryName;
                  });
                </script>

Add intl-tel-input HTML Layout

Now, we need to add basic intl-tel-input layout to our app:

              
                <input type="tel" class="form-control inptFielsd country-phone" id="phone" placeholder="Your phone">

Select

              
                <div class="form-group">
                  <input type="tel" class="form-control inptFielsd country-phone" id="phone" placeholder="Your phone">
                </div>