如何让HTML <input type="time">支持超23小时的时长选择？

Ah, great question! The native <input type="time"> has a hard limitation baked into its HTML spec: the hour component is restricted to 0-23, and setting the max attribute won't bypass this—this is exactly why your max="10000:00:00" didn't change anything.

Luckily, there are solid workarounds to support time points or durations beyond 23:59:59 while keeping a user-friendly interface. Here are a few practical approaches:

Break the time into three independent number inputs for hours, minutes, and seconds. This gives you full control over the hour range, and you can enforce valid ranges for minutes/seconds out of the box:

<div style="display: flex; gap: 8px; align-items: center;">
  <label for="hour-input">Hours:</label>
  <input type="number" id="hour-input" min="0" step="1" value="0" style="width: 80px;">
  <span>:</span>
  <label for="minute-input">Minutes:</label>
  <input type="number" id="minute-input" min="0" max="59" step="1" value="0" style="width: 60px;">
  <span>:</span>
  <label for="second-input">Seconds:</label>
  <input type="number" id="second-input" min="0" max="59" step="1" value="0" style="width: 60px;">
</div>

You can tweak the CSS to make this look cohesive (like matching input styles) and even add JavaScript to sync values (e.g., auto-increment hours when minutes hit 60) if you want to replicate the "rollover" behavior of native time inputs.

If you prefer a single input field, use a text input with regex validation and JavaScript to enforce the HH:MM:SS format (with unlimited hours):

<label for="long-duration">Select a time point:</label>
<input 
  type="text" 
  id="long-duration" 
  pattern="\d+:[0-5]\d:[0-5]\d" 
  placeholder="e.g., 46:59:10"
  style="padding: 4px; font-size: 1rem;"
>

<script>
const durationInput = document.getElementById('long-duration');

durationInput.addEventListener('input', (e) => {
  // Clean input: keep only numbers and colons
  let value = e.target.value.replace(/[^0-9:]/g, '');
  
  // Auto-format to HH:MM:SS as user types
  const parts = value.split(':');
  if (parts.length === 1 && value.length >= 2) {
    // Split first two digits as hours, rest start minutes
    value = value.slice(0, -2) + ':' + value.slice(-2);
  } else if (parts.length === 2 && parts[1].length >= 2) {
    // Split minutes into two digits, rest start seconds
    value = `${parts[0]}:${parts[1].slice(0,2)}:${parts[1].slice(2)}`;
  }
  
  // Enforce valid minutes/seconds (0-59)
  const formattedParts = value.split(':');
  if (formattedParts.length >= 2) {
    formattedParts[1] = Math.min(59, Math.max(0, parseInt(formattedParts[1]) || 0))
      .toString().padStart(2, '0');
  }
  if (formattedParts.length >= 3) {
    formattedParts[2] = Math.min(59, Math.max(0, parseInt(formattedParts[2]) || 0))
      .toString().padStart(2, '0');
  }
  
  e.target.value = formattedParts.join(':');
});
</script>

This mimics the native time input's typing experience but lets users enter any number of hours. The pattern attribute will trigger browser validation if the input doesn't match the required format.

If you're already using a UI library (like Bootstrap, Material UI, or Flatpickr), many of these offer custom time/duration pickers that support values beyond 23 hours. For example, some libraries let you configure the picker to display "total hours" instead of wrapping at 24, which is perfect for your long video use case.

Key Takeaway #

The native <input type="time"> can't be modified to support hours over 23—it's a spec-level restriction. Your best bet is to use one of the custom approaches above to get the flexibility you need for precise time points in long videos.

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