jquery国际电话号码输入

Question

我正在尝试按照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

我曾尝试更改脚本中注释掉的选项，但没有帮助。

Answer 1

好的，我解决了这个问题。 因此，基本上，这里的选项字段必须为true，我们需要将以下脚本放在</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>

将其放置在关闭head标签之前，并记得调用$("#mobile-number").intlTelInput(); 因为它很重要。

Answer 2

您只是忘了将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"
    });
});

Answer 3

国家代码将始终在此代码的输入字段中

$("#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);
}});

Answer 4

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

Answer 5

为什么国家国旗和国家代码在页面回发时不稳定。

到目前为止，这是我尝试过的：

<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>

Answer 6

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"
    });
});

Answer 7

 //if you want to get coutry code value in input box then set  false 
                   nationalMode: false,

 separateDialCode: false,

Pease 在您的函数属性中设置这两行，它将运行

jquery国际电话号码输入

问题描述

7 个解决方案

解决方案1
3 2015-03-05 17:07:39

解决方案2
1 2015-03-05 16:36:28

解决方案3
1 2017-02-26 15:46:05

解决方案4
0 2016-11-26 08:00:54

解决方案5
0 2017-01-05 09:36:38

解决方案6
0 2017-06-16 09:48:14

解决方案7
0 2022-01-06 10:49:41

jquery国际电话号码输入

问题描述

7 个解决方案

解决方案1 3 2015-03-05 17:07:39

解决方案2 1 2015-03-05 16:36:28

解决方案3 1 2017-02-26 15:46:05

解决方案4 0 2016-11-26 08:00:54

解决方案5 0 2017-01-05 09:36:38

解决方案6 0 2017-06-16 09:48:14

解决方案7 0 2022-01-06 10:49:41

解决方案1
3 2015-03-05 17:07:39

解决方案2
1 2015-03-05 16:36:28

解决方案3
1 2017-02-26 15:46:05

解决方案4
0 2016-11-26 08:00:54

解决方案5
0 2017-01-05 09:36:38

解决方案6
0 2017-06-16 09:48:14

解决方案7
0 2022-01-06 10:49:41