如何阻止intl-tel-input输入手机号时自动切换国家旗帜

要阻止插件在用户输入号码时自动切换国家旗帜，只需在初始化插件时添加autoCountrySelect: false配置项即可，这个选项会禁用输入号码时的自动国家检测切换功能。

修改后的代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"></script>
<script type="text/javascript">
  var phoneInput = document.querySelector('#phone');
  var phoneIti = window.intlTelInput(phoneInput, {
    separateDialCode: true,
    initialCountry: 'ca',
    utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js',
    autoCountrySelect: false // 新增配置，禁用输入时自动切换国家
  });

  phoneInput.addEventListener('countrychange', function() {
    var dialInput = document.querySelector('#dailcode');
    var dialCode = phoneIti.getSelectedCountryData().iso2.toUpperCase();
    dialInput.value = dialCode;
  });
</script>

如果你的插件版本中没有autoCountrySelect选项（部分旧版本命名可能不同），可以尝试设置nationalMode: true，这个选项会强制使用初始国家的号码格式，同时阻止自动检测切换国家。

若需要更严格的控制，也可以监听输入事件，手动强制保持当前选中的国家不变：

phoneInput.addEventListener('input', function() {
  phoneIti.setCountry(phoneIti.getSelectedCountryData().iso2);
});

优先推荐使用配置项的方式，更简洁高效。

内容的提问来源于stack exchange，提问作者sidra ali