如何在input#phone失焦时获取当前选中的国家拨号码并赋值？

核心问题分析 #

1. 仅监听下拉列表点击事件无法覆盖所有国家切换场景（如自动识别号码切换、键盘操作切换），导致失焦时无法同步拨号码
2. #dialCode未设置只读，允许用户手动修改，且可能因配置问题导致表单提交时未传递值

修复步骤及代码 #

1. 优化拨号码同步逻辑 #

放弃仅监听下拉点击的方式，改用intl-tel-input内置的countrychange事件（覆盖所有国家切换场景），同时保留blur事件作为兜底：

// 初始化国际电话输入插件
const phoneInput = document.querySelector("#phone");
const itiInstance = window.intlTelInput(phoneInput, {
  initialCountry: "us",
  separateDialCode: true,
  // 保留原有其他配置
});

// 监听插件内置的国家切换事件
phoneInput.addEventListener("countrychange", () => {
  const selectedDialCode = itiInstance.getSelectedCountryData().dialCode;
  $("#dialCode").val(`+${selectedDialCode}`);
});

// 兜底监听输入框失焦事件
$("#phone").on("blur", () => {
  const selectedDialCode = itiInstance.getSelectedCountryData().dialCode;
  $("#dialCode").val(`+${selectedDialCode}`);
});

2. 禁止手动修改拨号码并确保表单提交 #

给#dialCode添加readonly属性，既禁止用户手动修改，又不影响表单提交（disabled属性会导致字段不被提交，需避免）：

<input type="text" id="dialCode" name="dialCode" readonly>
<input type="tel" id="phone" name="phone">

3. 额外防护（可选） #

若readonly仍无法阻止修改（如通过浏览器控制台），可添加JS事件拦截：

$("#dialCode").on("keydown paste cut", (e) => e.preventDefault());

关键说明 #

• countrychange是intl-tel-input官方提供的事件，支持点击下拉、自动识别号码、键盘切换等所有国家变更场景，比单独监听点击/失焦更可靠
• readonly属性不会影响表单字段的提交，而disabled会导致字段值不被传递，因此优先使用readonly

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