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

Question

我有以下输入字段：

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

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

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

Answer 1

您可以“阻止”输入字段中的 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"/>

Answer 2

我编写了这个简单的工作脚本来制作一个流畅的日期打字机，它将解决您的问题并提供更好的体验。 您可以尝试使用键盘上的向上/向下箭头，以便在拾取的日期更高/小于条件时如何运行。

 const customDateLimiter = input => { let conditionDates = { min: new Date(input.min), max: new Date(input.max) } const currentDate = new Date(input.value); if( currentDate < conditionDates.min ) input.value = conditionDates.min.toLocaleDateString().replaceAll("/", "-").split("-").reverse().join("-").toString(); //console.log( currentDate < conditionDates.min ); if( currentDate > conditionDates.max ) input.value = conditionDates.max.toLocaleDateString().replaceAll("/", "-").split("-").reverse().join("-").toString(); //console.log( currentDate > conditionDates.max ); return input.value; }

 <input type="date" min="2020-11-04" max="2100-01-01" onchange="customDateLimiter(this)" />