如何让text input外观和行为类似time input且始终显示冒号？

需求明确：让普通文本输入框在输入数字时自动呈现HH:MM格式，且冒号始终可见，输入1244时显示为12:44。以下是规范实现方案：

核心思路 #

通过输入拦截+实时格式化结合视觉伪装实现，既保证输入逻辑符合时间格式，又让冒号始终固定显示，同时模拟原生输入框的视觉体验。

具体实现步骤 #

1. 基础HTML结构 #

用容器包裹输入框和冒号元素，通过布局让它们视觉上成为一个整体：

<div class="time-input-wrapper">
  <input type="text" id="customTimeInput" maxlength="4" inputmode="numeric" placeholder="HHMM">
  <span class="fixed-colon">:</span>
</div>

• inputmode="numeric"确保移动端弹出数字键盘，提升输入效率
• maxlength限制输入长度，避免无效内容

2. CSS视觉整合 #

通过样式消除输入框与冒号的边界感，模拟原生输入控件的外观：

.time-input-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 6px 8px;
  font-family: monospace; /* 等宽字体保证数字与冒号对齐 */
}

#customTimeInput {
  border: none;
  outline: none;
  width: 4.5em;
  font-size: 16px;
  background: transparent;
}

.fixed-colon {
  margin: 0 3px;
  font-size: 16px;
  color: #374151;
}

3. JavaScript实时格式化逻辑 #

监听输入事件，过滤无效字符、控制输入长度，并做基础的时间合法性校验：

const timeInput = document.getElementById('customTimeInput');

timeInput.addEventListener('input', function() {
  // 只保留数字，过滤所有非数字字符
  let inputValue = this.value.replace(/\D/g, '');
  // 限制最多4位数字
  inputValue = inputValue.slice(0, 4);

  // 时间合法性校验：小时不超过23，分钟不超过59
  if (inputValue.length >= 2) {
    const hours = parseInt(inputValue.slice(0, 2), 10);
    if (hours > 23) {
      inputValue = '23' + inputValue.slice(2);
    }
  }
  if (inputValue.length > 2) {
    const minutes = parseInt(inputValue.slice(2), 10);
    if (minutes > 59) {
      inputValue = inputValue.slice(0, 2) + '59';
    }
  }

  this.value = inputValue;
});

// 点击容器时自动聚焦输入框，避免冒号区域干扰交互
document.querySelector('.time-input-wrapper').addEventListener('click', () => {
  timeInput.focus();
});

4. 体验优化点 #

• 输入前两位后自动跳转光标到分钟位，提升输入流畅度
• 支持删除操作时的格式适配，避免光标错位
• 可添加失去焦点时的补零逻辑（比如输入1自动转为01，输入123转为12:03）

为什么不用原生time输入？ #

原生<input type="time">的样式和行为受浏览器、系统控制，无法自定义冒号的固定显示逻辑，且部分环境下的交互体验不一致，因此用文本输入框模拟是更灵活可控的方案。

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