javascript - HTML 如何阻止用户输入大于 2100-01-01 的日期？

Question

我有以下输入字段:

<input type="date" min="2020-11-04" max="2100-01-01"/>

这对于限制日期从 2020-11-04 非常有效直到 2100-01-01在日期选择器中。但是，用户仍然可以输入大于或小于指定的 min 的日期。和 max通过在输入字段中键入。

有没有一种方法可以阻止此客户端使用 HTML 和/或 JavaScript，这样用户就无法输入大于或小于指定 min 的日期？和 max ？我想保留 <input type="date"> 附带的日期选择器，所以我不确定使用正则表达式模式是否是解决此问题的正确方法。

Answer 1

您可以“阻止”输入字段中的按键事件。这将强制用户使用日期选择器。

在这里，我向输入添加了一个类，并使用了 querySelectorAll，以防您有多个字段需要影响。

虽然我非常同意@gavgriff 关于他验证字段的建议......你的问题是“如何阻止用户输入” ;)

document.querySelectorAll(".noTyping").forEach(el=>{
  el.addEventListener("keydown", function(e){
    e.preventDefault()
  })
})

<input class="noTyping" type="date" min="2020-11-04" max="2100-01-01"/>