为何<input type='time'>的min、max属性未按预期生效?技术咨询
关于
<input type="time">的min/max属性的问题解答 你遇到的情况是正常的——min和max属性本身并不直接限制用户在时间选择器中点击选择超出范围的时间,它们的核心作用是表单提交时的验证规则:
- 当用户输入或选择了超出
min(09:00)或max(18:00)范围的时间,点击表单提交按钮时,浏览器会弹出验证提示,阻止表单提交。 - 你可以测试验证逻辑:给表单添加提交按钮,选择08:59这类超出范围的时间后点击提交,浏览器会提示输入不符合要求。
如果想要真正阻止用户选择超出范围的时间,需要结合JavaScript实现,比如监听时间选择事件,自动修正超出范围的选择值:
const timeInput = document.getElementById('appt'); timeInput.addEventListener('change', function(e) { const minTime = new Date(`1970-01-01T${this.min}`).getTime(); const maxTime = new Date(`1970-01-01T${this.max}`).getTime(); const selectedTime = new Date(`1970-01-01T${this.value}`).getTime(); if (selectedTime < minTime) { this.value = this.min; } else if (selectedTime > maxTime) { this.value = this.max; } });
这段代码会在用户选择时间后,自动将超出范围的时间修正为min或max值,强制限制在允许范围内。
内容的提问来源于stack exchange,提问作者four-eyes
相关产品推荐
相关产品推荐

