如何用jQuery检测input[type="time"]是否部分或完全填充

问题背景 #

需要验证时段填写表单（如「上午08:00至下午19:00」），核心需求：

• 表单提交时，若上午/下午时段未填写，显示错误提示
• 提交后若出现「从08:00到..:..」的情况：补填下午时段则通过验证；若清除上午时段则移除错误提示

遇到的技术问题：

• 使用keyup事件时，清除分钟部分后jQuery判定输入框为空
• 无法依赖blur()方法，用户通常不会点击输入框外触发检测
• 输入框处于「仅填小时」状态时，$(input).val()返回空字符串，无法识别部分填充状态

代码示例（尝试过的无效方法） #

HTML #

<input type="time">

jQuery #

// change事件仅在输入完成（完整HH:mm）时触发
$(document).on("change", "input", function () {
   console.log($(this).val());
});

// 以下方法均无法检测部分填充状态：keyup/keydown/blur/focusIn/focusOut/text()/html()
/*
$('input').blur(function () {
   console.log($(this).val());
});
*/
/*
setTimeout(function(){
   console.log($(this).val());
});
*/
/*
console.log($(this).delay(20).val());
*/

可行解决方案 #

浏览器原生input[type="time"]仅在输入符合HH:mm格式时才会更新value属性，但可以通过**valueAsNumber属性**检测部分填充状态：该属性会返回时间戳，仅输入小时时会默认分钟为0并返回对应时间戳，未输入任何内容时返回NaN。

实时检测部分填充状态 #

$(document).on("input", "input[type='time']", function() {
  const nativeInput = $(this)[0];
  if (!isNaN(nativeInput.valueAsNumber)) {
    // 已输入至少小时部分
    const time = new Date(nativeInput.valueAsNumber);
    const hours = time.getHours();
    const minutes = time.getMinutes();
    
    if (nativeInput.value) {
      console.log(`完全填充：${hours}:${minutes.toString().padStart(2, '0')}`);
    } else {
      console.log(`部分填充：仅输入小时${hours}`);
    }
  } else {
    console.log("未填充任何内容");
  }
});

表单提交验证逻辑 #

假设表单包含两个时间输入框：.start-time（上午时段）、.end-time（下午时段）：

$('form').submit(function(e) {
  let isValid = true;
  const startTime = $('.start-time')[0];
  const endTime = $('.end-time')[0];

  // 验证上午时段：至少输入小时
  if (isNaN(startTime.valueAsNumber)) {
    isValid = false;
    $('.start-error').text('请填写上午时段');
  } else {
    $('.start-error').text('');
  }

  // 验证下午时段：至少输入小时
  if (isNaN(endTime.valueAsNumber)) {
    isValid = false;
    $('.end-error').text('请填写下午时段');
  } else {
    $('.end-error').text('');
  }

  // 验证不通过则阻止提交
  if (!isValid) e.preventDefault();
});

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