如何用纯JavaScript实现输入时保留Input Mask显示？

核心思路是用独立的掩码元素模拟显示效果，不修改输入框的实际值，通过定位让掩码看起来和输入框绑定，同时监听输入框的事件动态更新掩码状态：

实现步骤与代码示例 #

1. HTML结构 #

把输入框和掩码元素放在同一个相对定位的容器里，让掩码可以覆盖在输入框上方：

<div class="input-mask-wrapper">
  <input type="text" id="targetInput" placeholder="" />
  <span class="input-mask" id="inputMask">XXX-XXXX-XXXX</span>
</div>

2. CSS样式 #

设置容器相对定位，掩码元素绝对定位覆盖输入框，同时禁用掩码的鼠标事件，确保输入框能正常接收交互：

.input-mask-wrapper {
  position: relative;
  display: inline-block;
}

#targetInput {
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
  /* 让输入文本和掩码对齐 */
  font-family: monospace;
}

.input-mask {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px 12px;
  font-size: 16px;
  color: #999;
  pointer-events: none; /* 点击穿透到输入框 */
  font-family: monospace;
  opacity: 0; /* 默认隐藏 */
}

3. JavaScript逻辑 #

监听输入框的focus、blur、input事件，动态更新掩码的显示内容和状态：

const input = document.getElementById('targetInput');
const maskElement = document.getElementById('inputMask');
const originalMask = 'XXX-XXXX-XXXX'; // 定义你的掩码格式

// 聚焦时显示掩码
input.addEventListener('focus', () => {
  maskElement.style.opacity = '1';
  updateMaskDisplay();
});

// 失焦时隐藏掩码
input.addEventListener('blur', () => {
  maskElement.style.opacity = '0';
});

// 输入内容时更新掩码显示
input.addEventListener('input', updateMaskDisplay);

// 核心函数：根据输入内容生成对应的掩码显示
function updateMaskDisplay() {
  const inputValue = input.value.replace(/[^0-9]/g, ''); // 只保留数字（可根据需求调整允许输入的字符）
  let displayMask = '';
  
  // 遍历原始掩码，替换已输入的位置为空白，保留未输入的掩码字符
  for (let i = 0, j = 0; i < originalMask.length; i++) {
    if (originalMask[i] === 'X') {
      if (j < inputValue.length) {
        // 已输入的位置用空白占位，让输入内容显示在上方
        displayMask += '\u00A0'; // 非换行空格，保证宽度一致
        j++;
      } else {
        displayMask += originalMask[i];
      }
    } else {
      // 掩码中的分隔符直接保留
      displayMask += originalMask[i];
    }
  }
  
  maskElement.textContent = displayMask;
}

关键细节说明 #

• 掩码元素使用pointer-events: none，确保用户的点击、输入操作直接作用于输入框，不会被掩码干扰
• 使用\u00A0（非换行空格）替换已输入的掩码位，保证掩码整体宽度和原始格式一致，输入内容能和掩码分隔符对齐
• 只在聚焦和输入时更新掩码，失焦自动隐藏，完全不修改输入框的实际value值，掩码始终是独立的显示层

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