Как добавить код страны с префиксом поля ввода номера мобильного телефона

Question

Мне нужно добавить код страны в префикс поля ввода номера мобильного телефона. Я пробовал приведенный ниже код.

 <script>
   var telInput = $("#mobile"),
   errorMsg = $("#error-msg"),
   validMsg = $("#valid-msg");

   // initialise plugin
   telInput.intlTelInput({

   allowExtensions: true,
   formatOnDisplay: true,
   autoFormat: true,
   autoHideDialCode: true,
   autoPlaceholder: true,
   defaultCountry: "in",
   ipinfoToken: "yolo",

   nationalMode: false,
   numberType: "MOBILE",
   //onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
   preferredCountries: ['sa', 'ae', 'qa','om','bh','kw','ma'],
   preventInvalidNumbers: true,
   separateDialCode: false,
   initialCountry: "in",
   geoIpLookup: function(callback) {
   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
     var countryCode = (resp && resp.country) ? resp.country : "";
     callback(countryCode);
    });
 },
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/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");
     } else {
       telInput.addClass("error");
       errorMsg.removeClass("hide");
     }
   }
 });

 // on keyup / change flag: reset
 telInput.on("keyup change", reset);

</script>

Я пробовал, и он работает. Но я могу указать номер мобильного телефона без кода страны, а этого быть не должно. Код страны нельзя редактировать.

Я использовал ниже js и css:

<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/css/intlTelInput.css" rel="stylesheet" media="screen">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/intlTelInput.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/intlTelInput.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/utils.js"></script>

Answer 1

Существует лучший и более гибкий способ сбора телефонных номеров в виде отличного jQuery плагина

Вы также можете поиграть с живым демо здесь

Простое использование убедитесь, что вы включили jQuery, библиотеку и CSS и что спрайт флага доступен и правильно указан в CSS - вы найдете его в build / img / flags.png

Затем создайте элемент:

<input type="tel" id="number">

Наконец, инициализируйте его следующим образом:

$("#number").intlTelInput();

Полный список параметров конфигурации см. В документации.