intlTelIput.js 国家地区号码选择器,带国旗展示的JS插件
作者:朱尚 / 日期:2021-05-24 / 分类:JavaScript / 浏览:357

效果图:


资料和方法:

1.jq22网站,只能给你简单的配置信息。

       http://www.jq22.com/jquery-info12917

2,中文资料查阅,能给你更多,插件提供的配置,属性,方法等等。

  https://www.kutu66.com//GitHub/article_99526

 3.github搜索intlTelInput,也能找到,但是,是英文版,需要翻译一下。

注意:kutu66提供的文档版本为V14,GitHub里的版本为V17,使用方法不同


操作实例:

  按要求,引入,intlTelIput.js和intlTelIput.css等等,记得,本地测试,会再加载utils.js的时候,出现跨域请求失败的错误。必须,必须,必须搭建服务器,或者在线上进行测试。

  此为V17版本:

<script>
                    var input = document.querySelector("#Phone");
                    var iti = window.intlTelInput(input, {
                        // allowDropdown: false,
                        // autoHideDialCode: false,
                        // autoPlaceholder: "off",
                        // dropdownContainer: document.body,
                        // excludeCountries: ["us"],
                        // formatOnDisplay: false,
                        // geoIpLookup: function(callback) {
                        //   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
                        //     var countryCode = (resp && resp.country) ? resp.country : "";
                        //     callback(countryCode);
                        //   });
                        // },
                        // hiddenInput: "full_number",
                        // initialCountry: "auto",
                        // localizedCountries: { 'de': 'Deutschland' },
                        // nationalMode: false,
                        // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
                        // placeholderNumberType: "MOBILE",
                        // preferredCountries: ['cn', 'jp'],
                        separateDialCode: true,
                        utilsScript: "js/utils.js",
                    });
                    $("#Phone").on("change", function () {
                        var guojiaobj = iti.getSelectedCountryData();
                        //    获取插件当前的国家信息,以对象的形式出现,这是插件自带的,需要研究文档
                        //var guojiaobj = $("#Phone").intlTelInput("getSelectedCountryData");
                        //    获取国家的名字,为了保存
                        //var guojia = guojiaobj.name;
                        //    设置国家的值
                        //$("#guojia").val(guojia);
                        //    获取区号,为了拼接成 +86-111111111 的格式
                        var quhao = guojiaobj.dialCode;
                        var dianhua = $("#Phone").val();
                        var all = '+' + quhao + ' ' + dianhua;
                        //  设置带区号的值
                        $("#phoneplus").val(all);
                    });
                </script>


上一篇:没有了
下一篇:juqery对DropDownList/select取值赋值
本文标签: intlTelIput.js 国家地区号码
本文链接:http://www.banzhuan.net/detail/366