时间戳

首页 > 解决方案 > 如何检测 type=time 的输入是否输入了任何值

javascript - 如何检测 type=time 的输入是否输入了任何值

问题描述

我有一个 javascript 脚本，只要输入的 html 表单输入了type="time"任何值，它就会检测到。

但是，每当我输入部分值（例如，键入一个数字，而不是 AM/PM 的完整时间）时，它都不会检测到输入有值。

在下面的示例中， timeSelector 是带有 的输入type="time"。

if (timeSelector.value == "") {
    timeSelector.classList.add("empty");
} else {
    timeSelector.classList.remove("empty");
}

有什么方法可以检测到这种类型的东西吗？

为了澄清，由于显然我没有足够清楚地问我的问题，我需要检测输入何时time输入了某些内容，即使该输入是无效或不完整的。

标签： javascripthtmlforms

解决方案

那么 html5 输入的问题是，如果输入无效，它们不会在输入中给出文本。因此，您可以checkValidity在用户从元素中移除焦点时使用。

var checkInput = function() {
  var value = this.value
  var isValid = this.checkValidity()
  if (!this.value.length && isValid) {
    console.log('empty');
  } else if (!this.value.length && !isValid) {
    console.log('invalid time entered')
  } else {
    console.log('valid time entered')
  }
}

var input = document.querySelector("input")

input.addEventListener("input", checkInput)
input.addEventListener("blur", checkInput)
<input type="time" />

推荐阅读