intlTelIput.js----國家地區號碼選擇器，帶國旗展示的JS插件，用的人很多

記錄一下，今天客戶的需求，想做成這種。

 

 

 一：需求：國家地區號碼選擇器，帶國旗展示

有國旗，有區號，有下拉，有提示，並且獲取到純手機號以后，提交到后台，要能知道，要展現類似+86-12727262722的電話樣式。還要知道是哪個國家的。

 二：后端字段的設計

設置了三個字段，phone（純手機號），phoneplus（帶區號的手機號），guojia（手機號所屬國家）。其中，后兩個的input類型設置為，type=hidden。

三：前端的實現

百度一下，就能看到排名第一的，jq22網站提供的演示和基礎的實現方法：

網址為：  http://www.jq22.com/jquery-info12917

前端，按要求，引入，intlTelIput.js和intlTelIput.css等等，記得，本地測試，會再加載utils.js的時候，出現跨域請求失敗的錯誤。必須，必須，必須搭建服務器，或者在線上進行測試。

另外附上，自定義的一些JS。

//   開始監聽純號碼的輸入

  $("#phone").on("change", function(){

        //    獲取插件當前的國家信息，以對象的形式出現，這是插件自帶的，需要研究文檔

           var guojiaobj =$("#phone").intlTelInput("getSelectedCountryData");

        //    獲取國家的名字，為了保存

           var guojia=guojiaobj.name

        //    設置國家的值

           $("#guojia").val(guojia)  

        //    獲取區號，為了拼接成 [phone] 的格式

           var quhao=guojiaobj.dialCode

           var dianhua=$("#phone").val();

           var all ='+'+quhao+'-'+dianhua

        //  設置帶區號的值

           $("#phoneplus").val(all)  

           });

　　

四：相關思考和參考資料

 1.jq22網站，只能給你簡單的配置信息。

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

2,中文資料查閱，能給你更多，插件提供的配置，屬性，方法等等。

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

 3.當然在github搜索intlTelInput，也能找到，但是，是英文版，需要翻譯一下。

 4.使用npm也可以下載到。

五：最終實現了。浪費了兩三個小時，還是需要努力啊。