如何在HTML中实现MM:SS.ms格式的时间输入与展示？

我想要制作一个类似冬奥会赛事结果的时间表，需要让用户输入MM:SS.ms（分钟：秒：毫秒）格式的时间，目前已经写了部分代码，但不知道怎么实现特定格式的输入控制。以下是我现有的代码：

<style type="text/css"> 
  #time1, #time2 { 
    width: 125px; 
  } 
</style> 
<form> 
  <label for="time1">Result </label> 
  <input id="time1" type="text" name="time1"> 
  <input type="checkbox" ... <!-- 你的代码片段到这里 -->
</form>

方案1：用HTML5原生属性做基础验证 #

最简单的方式是给输入框加上pattern属性，用正则表达式限制输入格式，同时配合title属性给出格式提示，用户输入不符合要求时，提交表单会自动触发提示。

修改你的输入框代码：

<input 
  id="time1" 
  type="text" 
  name="time1"
  pattern="^\d{2}:\d{2}\.\d{3}$"
  title="请输入MM:SS.ms格式的时间，例如：01:23.456"
  placeholder="00:00.000"
  required
>

• pattern="^\d{2}:\d{2}\.\d{3}$"：强制输入必须是「两位数字+冒号+两位数字+句号+三位数字」的格式
• required：标记为必填项，防止空提交
• placeholder：给用户一个格式示例，引导正确输入

方案2：优化样式提升体验 #

结合你现有的CSS，可以补充一些样式，让输入框在不同状态下更直观：

#time1, #time2 { 
  width: 125px;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
/* 输入符合格式时的样式 */
#time1:valid {
  border-color: #2ecc71;
}
/* 输入不符合格式时的样式 */
#time1:invalid {
  border-color: #e74c3c;
}

方案3：JavaScript增强交互（可选） #

如果想要更流畅的输入体验（比如自动补充分隔符），可以加一点JS代码，让用户输入到对应位置时自动插入:和.：

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

timeInput.addEventListener('input', function(e) {
  let value = e.target.value.replace(/[^0-9]/g, ''); // 只保留输入的数字
  let formattedValue = '';
  
  if (value.length >= 2) {
    formattedValue += value.slice(0, 2) + ':';
    value = value.slice(2);
  }
  if (value.length >= 2) {
    formattedValue += value.slice(0, 2) + '.';
    value = value.slice(2);
  }
  formattedValue += value.slice(0, 3);
  
  e.target.value = formattedValue;
});

这段代码会自动处理输入逻辑：用户输入前两位数字后自动加:，再输入两位后自动加.，最后只允许输入三位毫秒数，完全贴合MM:SS.ms的格式。

这样组合下来，你就能实现和目标页面类似的时间输入效果啦！

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