如何绑定国家/地区更改国际电话输入

Posted 2023-05-09

【中文标题】如何绑定国家/地区更改国际电话输入

【英文标题】：how to bind country change intl tel input

【发布时间】：2020-05-18 21:48:11

【问题描述】：

我使用国家代码插件名称intlTelInput.js （这个我演示页面） 在页面中我想在国家选择更改时清空手机（输入字段）

<div class="demo">
    <h3>Demo</h3>
    <div class="iti iti--allow-dropdown">
        <div class="iti__flag-container">
            <div class="iti__selected-flag" role="combobox" aria-owns="country-listbox" tabindex="0"
                title="Algeria (&#8235;الجزائر&#8236;&lrm;): +213">
                <div class="iti__flag iti__dz"></div>
                <div class="iti__arrow"></div>
            </div>
        </div><input type="tel" id="phone" class="form-control" autocomplete="off" data-intl-tel-input-id="0"
            placeholder="0551 23 45 67">
    </div>
</div>

我试过了：

$(".iti__selected-flag").bind('change', function(event) 
         $('#phone').val('')
      );

并且 下面的代码将使手机字段值为空（单击时，但在选择另一个国家/地区项目完成后我希望它为空）

$(function()
      $("#phone").bind('change', function(event) 
         $('#phone').val('')
      );
    )

但它不起作用

【问题讨论】：

bind 更改为 div ！

$(function() $("#phone").bind('change', function(event) $('#phone').val('') ); ) //绑定 id 时也不起作用

两者都是错误的方式，你试图在select上绑定更改但你试图绑定div或phone，你应该绑定select

【参考方案1】：

有一种本地方式可以绑定国家/地区更改intl-tel-input：

var input = $("#phone");
input.intlTelInput();

input.on("countrychange", function() 
  input.val('')
);

【参考方案2】：

var input = document.querySelector("#phone1");        
   window.intlTelInput(input,         
     initialCountry: "In", //change according to your own country.      
     utilsScript: "assets/js/utils.js",        
);

【讨论】：

请在您的答案中添加一些解释，以便其他人可以从中学习