如何在页面加载时为表单输入框执行手机号掩码格式化？

你可以把手机号格式化逻辑抽成独立函数，这样既可以在输入事件里复用，也能在页面加载时直接调用处理数据库返回的值。具体改造如下：

<script type="text/javascript">
// 抽离通用的手机号格式化函数
function formatPhoneNumber(phoneValue) {
  // 先清除所有非数字字符
  const cleanNumber = phoneValue.replace(/\D/g, '');
  // 按分组匹配
  const match = cleanNumber.match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
  // 生成格式化后的字符串
  if (!match[2]) {
    return match[1];
  } else {
    return `(${match[1]}) ${match[2]}${match[3] ? '-' + match[3] : ''}`;
  }
}

// 获取目标输入框元素
const phoneInput = document.getElementById(`phoneinput_<%= dom_id(field) %>`);

// 页面加载时执行格式化，处理数据库返回的初始值
if (phoneInput.value) {
  phoneInput.value = formatPhoneNumber(phoneInput.value);
}

// 保持原有的输入事件监听，复用格式化函数
phoneInput.addEventListener('input', function (e) {
  e.target.value = formatPhoneNumber(e.target.value);
});
</script>

关键说明 #

• 把格式化逻辑独立成函数后，不管是页面初始化还是用户输入，都用同一套规则处理，避免逻辑不一致。
• 初始化时先判断输入框是否有值（防止空值处理报错），再调用格式化函数更新显示。
• 原有的输入事件逻辑简化为直接调用函数，代码更简洁易维护。

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