如何检测 type=time 的输入是否输入了任何值答案

【问题标题】：How do I detect whether or not an input with type=time has any values entered如何检测 type=time 的输入是否输入了任何值
【发布时间】：2020-02-18 20:41:01
【问题描述】：

我有一个 javascript 脚本，它应该能够检测到带有 type="time" 的 html 表单输入是否输入了任何值。

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

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

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

有没有办法检测到这种东西？

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

【问题讨论】：

那是因为"1" 这是一个无效时间，并且无效时间不会返回值。这就是数字、日期和时间输入的工作原理。
您发布的内容还不够多，我们无法为您提供帮助。 HTML在哪里？调用您发布的if 语句的代码在哪里？这段 JavaScript 在你的代码中的什么位置？
@epascarello 感谢您与实际问题互动。我明白你的意思了。我的问题是，我将如何检测这种类型的部分/无效输入？编辑：澄清一下，我指的是上一个问题之前的问题。
您可能认为它们不相关，但我们确实如此。如果不全面了解您正在做什么，我们无法知道您的问题是简单的拼写错误还是完全其他原因。
您可以随心所欲地争论，但如果没有相关代码，我们所能做的就是提供有根据的猜测。而不是争论，why not learn how to use this platform?

标签： javascript html forms

【解决方案1】：

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)

&lt;input type="time" /&gt;

【讨论】：

阅读此答案后，我意识到我没有足够清楚地问我的问题。您的回答非常清晰简洁地回答了我问的问题，但不幸的是，这不是我要问的问题。我已在问题的末尾附加了说明。
您可以判断是否输入了某些内容，但您无法判断输入的内容。更新了 3 个州的问题。
这很有帮助。谢谢你。需要注意的一点是，如果需要该元素，这将不起作用，因此最好在检查有效性之前设置this.required = false，之后设置this.required = true。
这在 Safari (macOS) 中没有给出正确答案。在这种情况下，input.checkValidity() 在将部分数据输入非必填字段时返回true（这感觉还可以——数据不是必需的，因此它被认为是空的）。不过对我没有帮助。

【解决方案2】：

根据Input Elements 上的规范，类型为time（HTML Spec）：

value 属性，如果指定且不为空，则必须具有一个有效时间字符串的值。

如果元素的值不是有效的时间字符串，则将其设置为空字符串。

这意味着input 和change 事件在整个时间字段被填写之前不会发生。为什么？因为没有什么真正的改变了。

您可能认为可以通过使用keydown 或keyup 事件来规避此问题，但事实并非如此。

该值未更改，因此无法访问，直到能够被解析为时间的完整字符串位于时间输入框中。

通过填写以下示例，您可以了解事件是如何触发的。注意value 在everything 被填满之前缺少。

let i = document.querySelector("input"),
on = type => i.addEventListener(type, function() { console.log(`${type}, value: ${i.value}`); });

on("keydown");
on("keyup");
on("change");
on("input");

&lt;input type="time"&gt;

可能解决缺少更改值的唯一方法是设置一个默认值，如下所示：

let i = document.querySelector("input"),
on = type => i.addEventListener(type, function() { console.log(`${type}, value: ${i.value}`); });


on("change");

&lt;input type="time" value="00:00"&gt;

但是，使用默认值时，用户可能会提交您可能不想要的时间。

您可以编写一些验证代码来解决这个问题，具体取决于您的功能的复杂性，这可能是可能的。

总体如果这是您需要的东西，并且功能比您认为自己可以处理的验证要复杂一些，最好创建自己的来自其他输入类型的时间输入接口，或者使用来自已经完成工作的源的库或 UI 工具包。

【讨论】：