时间戳

首页 > 解决方案 > HTML 如何阻止用户输入大于 2100-01-01 的日期？

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

问题描述

我有以下输入字段：

<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">，所以我不确定使用正则表达式模式是否是解决此问题的正确方法。

标签： javascripthtml

解决方案

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

在这里，我向输入添加了一个类，并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"/>

推荐阅读