Fatal编程技术网
  • javascript/
  • Javascript Jquery国际电话号码输入

Javascript Jquery国际电话号码输入

javascript jquery

Javascript Jquery国际电话号码输入,javascript,jquery,Javascript,Jquery,我试图按照jquery教程创建表单中带有国家代码的输入类型number。然而，在我的例子中，虽然标志似乎发生了变化，但国家代码并没有像演示中显示的那样添加到输入字段中 以下是他们提供的代码： <head> <meta charset="utf-8"> <title>International Telephone Input</title> <link rel="stylesheet" href="build/css/intlTelInput.

我试图按照jquery教程创建表单中带有国家代码的输入类型number。然而，在我的例子中，虽然标志似乎发生了变化，但国家代码并没有像演示中显示的那样添加到输入字段中

以下是他们提供的代码：

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


国际电话输入
提交
$（“#手机号码”）.intlTelInput({
//allowExtensions:true，
//自动格式化：false，
//autoHideDialCode:错误，
//自动换位机持有者：错误，
//defaultCountry:“自动”，
//ipinfoToken：“yolo”，
//国家模式：错误，
//numberType:“手机”，
//仅限国家：['us'、'gb'、'ch'、'ca'、'do']，
//首选国家：['cn'，'jp']，
//无效数字：正确，
utilsScript：“lib/libphonenumber/build/utils.js”
});

下面是我尝试实现它的链接：

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

您只是忘记将jquery代码放在de 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"
    });
});
好的，我解决了这个问题。 因此，这里基本上是必须为真的选项字段，我们需要将下面的脚本放在
标记之前

脚本：

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


$（函数（）{
$（“#手机号码”）.intlTelInput({
allowExtensions:true，
自动格式化：false，
autoHideDialCode:错误，
自动换位机持有者：错误，
defaultCountry:“自动”，
ipinfoToken：“yolo”，
国家模式：错误，
numberType:“手机”，
//仅限国家：['us'、'gb'、'ch'、'ca'、'do']，
//首选国家：['cn'，'jp']，
无效数字：正确，
utilsScript：“lib/libphonenumber/build/utils.js”
});
});
将其放置在关闭头标签之前，并记住调用
$（“#手机号码”）.intlTelInput（）因为它很重要
 

$（函数（）{
$（“#手机号码”）.intlTelInput({
autoHideDialCode:错误，
自动换位机持有者：错误，
国家模式：错误
});

});为什么回发页面上的国旗和国家代码不稳定

以下是我迄今为止所尝试的：


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




$（文档）.ready（函数（）{
$（“#电话”）.intlTelInput({
allowDropdown：正确，
//autoHideDialCode:错误，
//自动放置架：“关闭”，
//dropdownContainer:“body”，
//不包括国家：[“美国”]，
defaultCountry:“自动”，
//formatOnDisplay:错误，
//geoIpLookup:函数（回调）{
//$.get（”http://ipinfo.io，函数（）{}，“jsonp”）。始终（函数（resp）{
//变量countryCode=（相应国家和地区）？相应国家：；
//回调（countryCode）；
//    });
//},
//缩写国家：“自动”，
//国家模式：错误，
//仅限国家：['us'、'gb'、'ch'、'ca'、'do']，
//占位符号码类型：“移动”，
//首选国家：[in'，pk'，np'，bd'，us'，bt'，sg'，lk'，ny'，jp'，hk'，cn']，
//分离代码：对，
utilsScript：“build/js/utils.js”
});
$（“#电话”）。在（“countrychange”上，功能（e，countryData）{
$（“#hdnPhone”）.val（countryData.dialCode）；
});
});
$（文档）.ready（函数（）{
$（“#电话”）.val（“”）；
var HdnVal=$（“#hdnPhone”）.val（）；
如果（HdnVal！=''）{
var countryData=$（“#电话”）.intlTelInput（“getSelectedCountryData”）；
$（“#hdnPhone”）.val（countryData.dialCode）；
}
});

国家代码将始终与此代码一起出现在输入字段中


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



不，我做完后看不到旗子that@AbhishekSingh你说的是下拉菜单里面的国旗？是的，我说的是下拉菜单。它在添加文档后消失ready@AbhishekSingh奇怪，因为我试过你的网站和它的作品，当我改变了正确的值mask@AbhishekSingh取消注释nationalMode:falsenationalMode:false，//numberType:“MOBILE”，这两个都是罪魁祸首lol

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