step设为1时time输入框选择00:05:00秒部分不显示的技术问题

Hey there! Let's tackle this issue where your type="time" input isn't showing or returning the seconds when you select 00:05:00.

问题原因 #

浏览器对HTML5 time输入框的格式化行为存在差异：即使你设置了step="1"（允许秒级精度），当秒数为00时，部分浏览器会自动省略秒数部分，只返回HH:mm格式的值，而不是完整的HH:mm:ss。这就是为什么你的alert只弹出00:05。

解决方案 #

你可以通过两种方式确保获取到包含秒数的完整时间格式：

方法1：手动补全秒数

检查获取到的时间值是否缺少秒部分，若缺少则自动补充:00：

$('#compute').click(function(){
    let timeVal = $('#inputTime').val();
    // 判断是否为HH:mm格式，补全秒数
    if (timeVal.split(':').length === 2) {
        timeVal += ':00';
    }
    alert(timeVal);
})

方法2：使用valueAsDate获取精确时间组件

利用输入框的valueAsDate属性将时间转换为Date对象，然后提取时、分、秒并格式化输出：

$('#compute').click(function(){
    const timeInput = document.getElementById('inputTime');
    const dateObj = timeInput.valueAsDate;
    
    if (dateObj) {
        const hours = String(dateObj.getHours()).padStart(2, '0');
        const minutes = String(dateObj.getMinutes()).padStart(2, '0');
        const seconds = String(dateObj.getSeconds()).padStart(2, '0');
        const fullTime = `${hours}:${minutes}:${seconds}`;
        alert(fullTime);
    }
})

额外说明 #

• 务必保留input标签的step="1"属性，它是允许用户选择/输入秒数的核心配置。
• 这两种方法都能兼容不同浏览器的行为，保证你始终能拿到包含秒数的完整时间字符串。

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