min/max仅对number、range、date、datetime-local、month、week、time类型生效，text等其他类型忽略；动态设置需用setattribute，读取需parsefloat转换。
min 和 max 属性根本不是“只对数字有效”，而是只对有数值或时间语义的 type 有效——number、range、date、datetime-local、month、week、time。type="text" 加了就等于没写，浏览器直接忽略。
哪些 input type 真正识别 min/max
浏览器只在以下 type 上解析并应用 min 和 max 属性：
-
type="number"：值必须是合法数字字符串，如"10"、"-3.14"；"10.00"在旧版 Chrome 可能被截断小数位 -
type="range"：仅控制滑块范围，值始终为数字，无输入框，不校验格式 -
type="date"：值必须严格为"YYYY-MM-DD"，"2024-3-1"或"2024/03/01"全部静默失效 -
type="datetime-local"：格式为"YYYY-MM-DDTHH:MM"，不带秒、不带时区，"2024-03-01T14:30:00"会失败
其他所有类型（text、email、tel、color、file）加了 min/max 都不会触发任何校验行为，DOM 中属性存在，但 Constraint Validation API 完全不读取它们。
为什么 type="text" 的 min="5" max="5" 不报错
因为这不是 bug，是规范行为。HTML5 明确规定：min 和 max 是“数值范围约束”，不是“字符串长度约束”。浏览器不会尝试把 "5" 当作长度去比对 input.value.length。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 你写
<input type="text" min="5" max="5">，浏览器把它当做一个带自定义属性的普通文本框，和data-min="5"没区别 - 想限制客户编号为 5 位（含前导零），必须用
pattern="^.{5}$"，配合title提示 - 若强行用
type="number"，输入"00123"会被自动转成123，前导零丢失，移动端键盘也默认弹出数字键盘而非全键盘
动态设置 min/max 容易踩的坑
JavaScript 修改时，直接赋值 input.min = "2024-03-01" 在 Safari 上常不生效，UI 不更新，日历控件范围不变。
- ✅ 正确做法：
input.setAttribute('min', '2024-03-01')或input.setAttribute('max', '2024-12-31') - ❌ 错误写法：
input.min = new Date().toISOString()（格式非法）、input.min = 20240301（数字类型，转字符串后是"20240301"，非合法日期） - ⚠️ 注意空值：
input.setAttribute('min', '')会清空限制；input.min = null或undefined会被忽略，不等价于移除 - 读取时务必转换：
parseFloat(input.min)才能得到数字，input.min > 100是字符串字典序比较，结果不可靠
用户为什么还能输进非法值？
因为 min/max 只做两件事：控制日历/滑块 UI 范围 + 表单提交时触发 validity.rangeUnderflow 或 rangeOverflow。它完全不限制键盘输入、粘贴、JS 赋值。
- 用户可以在
type="date" max="2024-12-31"里手动输入"2025-01-01"，且无实时提示 -
input.valueAsNumber在非法日期下返回NaN，比new Date(input.value)更安全（后者跨时区可能偏移一天） - 真正兜底要靠
setCustomValidity()：比如if (input.value > input.max) input.setCustomValidity('不能晚于' + input.max) - 服务端永远不能信任前端的
min/max—— curl、禁用 JS、DOM 编辑都能绕过
最常被忽略的其实是 type 声明缺失和字符串未转数字这两点，一错，整个范围逻辑就失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
