有什么方法可以确定时间输入是部分填充还是空白？

Question

我有一个<input type="time">. Chrome 允许用户部分填写输入。例如，用户输入小时但不输入分钟，或者反之亦然。有没有办法使用 JavaScript 来检查该元素是否为空或部分填充？

value只要输入仅部分填充，该属性就是空的。所以那个不行。有没有可以利用的财产？

实际上我对部分输入的值不感兴趣。只是想通过警告没有小时或分钟的时间无效并将被忽略来改善用户体验。

JSBin https://jsbin.com/pikabowoyo/edit?html,js,output

let el = document.querySelector('button');
el.addEventListener('click', function() {
  let input = document.querySelector('input');
  console.log(input.value);
});

<input type="time">
<button>show value</button>

Answer 1

如果部分填写，时间输入无效。如果将输入留空并单击按钮，您将得到一个空值。如果您将输入填满一半，然后单击按钮，则输入将被标记为无效。

const el = document.querySelector('button');
el.addEventListener('click', function() {
  const input = document.querySelector('input');
  
  const validity = input.checkValidity();
  
  console.log(validity ? input.value : 'partial');
});

.time:invalid {
  border: 1px solid red;
}

<input type="time" class="time">
<button>show value</button>