如何让HTML文本输入框仅允许输入冒号分隔的两位数字？

你的现有代码无法满足需求，当前的pattern="\d{4}"仅匹配4位纯数字，maxlength="4"也限制了输入长度，和你需要的XX:XX格式完全不符。可以通过以下方式修改：

基础HTML表单验证方案 #

直接调整输入框属性，让它强制匹配目标格式：

<form name="form1"> 
  <input type="text" name="pincode" maxlength="5" id="pin" pattern="^\d{2}:\d{2}$" placeholder="33:33" required/>
  <input type="Submit"/> 
</form>

关键修改说明： #

• maxlength="5"：XX:XX是5个字符（2位数字+冒号+2位数字），调整长度限制适配格式
• pattern="^\d{2}:\d{2}$"：正则表达式确保输入内容必须是两位数字+冒号+两位数字，^和$强制整个输入完全匹配该规则
• placeholder="33:33"：给用户直观的格式提示，降低输入错误率

进阶：实时输入限制（配合JavaScript） #

如果要在用户输入过程中就限制内容，避免无效输入，可以添加简单的JS逻辑：

<form name="form1"> 
  <input type="text" name="pincode" maxlength="5" id="pin" pattern="^\d{2}:\d{2}$" placeholder="33:33" required/>
  <input type="Submit"/> 
</form>

<script>
const pinInput = document.getElementById('pin');
pinInput.addEventListener('input', function(e) {
  // 只保留数字和冒号，过滤其他所有字符
  let value = e.target.value.replace(/[^0-9:]/g, '');
  // 输入两位数字后自动添加冒号，优化输入体验
  if (value.length === 2 && !value.includes(':')) {
    value += ':';
  }
  // 确保冒号仅出现一次，避免重复输入
  if (value.split(':').length > 2) {
    value = value.slice(0, value.lastIndexOf(':'));
  }
  e.target.value = value;
});
</script>

这段JS会实时处理输入内容：

• 自动过滤数字和冒号以外的字符
• 在用户输入两位数字后自动插入冒号
• 限制冒号只能出现一次，避免格式混乱

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