2015-03-05 6 views
1

Я пытаюсь следовать учебнику jquery по адресу http://www.jqueryscript.net/form/jQuery-International-Telephone-Input-With-Flags-Dial-Codes.html, чтобы создать номер типа ввода с кодом страны в форме. Однако в моем случае, хотя флаг появляется, меняется код страны, который не добавляется внутри поля ввода, как они показывают в демо.JQuery Международный номер телефона

Ниже приводится код, который они предоставили:

<head> 
<meta charset="utf-8"> 
<title>International Telephone Input</title> 
<link rel="stylesheet" href="build/css/intlTelInput.css"> 
<link rel="stylesheet" href="build/css/demo.css"> 
</head> 
    <body> 

<form> 
    <input id="mobile-number" type="tel"> 
    <button type="submit">Submit</button> 
</form> 

<!-- Load jQuery from CDN so can run demo immediately --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="build/js/intlTelInput.js"></script> 
<script> 
    $("#mobile-number").intlTelInput({ 
    //allowExtensions: true, 
    //autoFormat: false, 
    //autoHideDialCode: false, 
    //autoPlaceholder: false, 
    //defaultCountry: "auto", 
    //ipinfoToken: "yolo", 
    //nationalMode: false, 
    //numberType: "MOBILE", 
    //onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'], 
    //preferredCountries: ['cn', 'jp'], 
    //preventInvalidNumbers: true, 
    utilsScript: "lib/libphonenumber/build/utils.js" 
    }); 
</script> 

Вот ссылка, где я пытаюсь реализовать: https://www.easyaccom.com/mobile/verifynumber.html

Я попытался изменениями закомментированных вариант в скрипт, но это не помогает.

ответ

1

Вы просто забыли поставить свой код jquery внутри документа document.ready.

смотри ниже:

$(document).ready(function(){ 

    $("#mobile-number").intlTelInput({ 
     //allowExtensions: true, 
     //autoFormat: false, 
     //autoHideDialCode: false, 
     //autoPlaceholder: false, 
     //defaultCountry: "auto", 
     //ipinfoToken: "yolo", 
     //nationalMode: false, 
     //numberType: "MOBILE", 
     //onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'], 
     //preferredCountries: ['cn', 'jp'], 
     //preventInvalidNumbers: true, 
     utilsScript: "lib/libphonenumber/build/utils.js" 
    }); 
}); 
+0

Не я не могу видеть флаги после того, как это делать –

+0

@AbhishekSingh вы говорите о флаге внутри выпадающего списка? – ErasmoOliveira

+0

Да, я говорю об этом выпадающем списке. Он исчезает после добавления готового документа –

2

Ok Я решил эту проблему. Итак, в основном здесь есть поля параметров, которые должны быть истинными, и нам нужно разместить нижеприведенный скрипт до тега </head>.

Сценарий:

<script> 
$(function() { 
$("#mobile-number").intlTelInput({ 
allowExtensions: true, 
autoFormat: false, 
autoHideDialCode: false, 
autoPlaceholder: false, 
defaultCountry: "auto", 
ipinfoToken: "yolo", 
nationalMode: false, 
numberType: "MOBILE", 
//onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'], 
//preferredCountries: ['cn', 'jp'], 
preventInvalidNumbers: true, 
utilsScript: "lib/libphonenumber/build/utils.js" 
}); 
}); 
</script> 

Места перед закрытием головы тега и не забудьте позвонить $("#mobile-number").intlTelInput();, как это важно.

0

$(function() { 
 
$("#mobile-number").intlTelInput({ 
 
    autoHideDialCode: false, 
 
    autoPlaceholder: false, 
 
    nationalMode: false 
 
}); 
 
});

0

Почему флаг страны и код страны не являются стабильными на странице поста назад.

Вот что я пытался до сих пор:

<script> 
     $(document).ready(function() { 
      $("#Phone").intlTelInput({ 
       allowDropdown: true, 
       // autoHideDialCode: false, 
       // autoPlaceholder: "off", 
       // dropdownContainer: "body", 
       // excludeCountries: ["us"], 
       defaultCountry: "auto", 
       // formatOnDisplay: false, 
       //geoIpLookup: function (callback) { 
       // $.get("http://ipinfo.io", function() { }, "jsonp").always(function (resp) { 
       //  var countryCode = (resp && resp.country) ? resp.country : ""; 
       //  callback(countryCode); 
       // }); 
       //}, 
       //initialCountry: "auto", 
       // nationalMode: false, 
       // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'], 
       // placeholderNumberType: "MOBILE", 
       // preferredCountries: ['in','pk', 'np','bd', 'us','bt','sg','lk','ny','jp','hk','cn'], 
       // separateDialCode: true, 
       utilsScript: "build/js/utils.js" 
      }); 

      $("#Phone").on("countrychange", function (e, countryData) { 
       $("#hdnPhone").val(countryData.dialCode); 
      }); 
     }); 
    </script> 
<script> 
     $(document).ready(function() { 
      $("#Phone").val(''); 
      var HdnVal = $("#hdnPhone").val(); 

      if (HdnVal != '') { 
       var countryData = $("#Phone").intlTelInput("getSelectedCountryData"); 

       $("#hdnPhone").val(countryData.dialCode); 
      } 
     }); 

    </script> 
+0

@manish_kumar Вам нужно предоставить некоторое объяснение. – codeepic

0

Код страна всегда будет находиться в поле ввода с этим кодом

$("#mobile-number").on("blur keyup change", function() { 
if($(this).val() == '') { 
    var getCode = $("#mobile-number").intlTelInput('getSelectedCountryData').dialCode; 
    $(this).val('+'+getCode); 
}}); 
$(document).on("click",".country",function(){ 
    if($("#phone").val() == '') { 
     var getCode = $("#mobile-number").intlTelInput('getSelectedCountryData').dialCode; 
     $("#mobile-number").val('+'+getCode); 
}}); 
0
try this code 

$("#mobile-number").intlTelInput({ 
     // allowExtensions: true, 
     //autoFormat: false, 
     autoHideDialCode: false, 
     // autoPlaceholder: false, 
     // defaultCountry: "auto", 
     //ipinfoToken: "yolo", 
     nationalMode: false, 
     // numberType: "MOBILE", 
     // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'], 
     //preferredCountries: ['cn', 'jp'], 
     //preventInvalidNumbers: true, 
     utilsScript: "lib/libphonenumber/build/utils.js" 
    }); 
}); 
Смежные вопросы