input[type="color"]不支持pattern等验证属性，应改用input[type="text"]配合正则^#?([0-9a-fa-f]{3}|[0-9a-fa-f]{6})$校验，并通过js实现输入实时标准化与错误反馈。
pattern 属性对 input[type="color"] 完全无效
浏览器会直接忽略你为 input[type="color"] 设置的 pattern、min、max、step 等表单验证属性。这不是 bug，而是 HTML5 规范明确规定的：这些属性不适用于 type="color"。一旦用了 type="color"，你就放弃了对输入值格式的手动校验能力。
所以，如果你的目标是“约束十六进制颜色代码输入”，就别用 input[type="color"] —— 它天生就不支持 pattern 校验，也不允许用户手动输入。
改用 input[type="text"] + 自定义 pattern 才可行
要真正启用 pattern，必须用文本输入框，并手动限定十六进制格式：
-
pattern值需匹配 3 位或 6 位十六进制（带可选 #）：例如^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$ - 加上
title提示用户格式要求，否则浏览器只静默拒绝提交 - 注意：正则中不能写
#开头强制，因为#fff和fff都合法；但多数编辑器/设计系统倾向带#，建议统一要求 - 若强制带
#，pattern 改为^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$，并设value="#000000"初始值
<input type="text" pattern="^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$" title="请输入带#号的3位或6位十六进制颜色码，如 #f00 或 #ff6b35" value="#000000">
为什么不用 input[type="color"] 却还要手动校验？
因为 input[type="color"] 的 value 永远是 7 位小写格式（如 "#ff0000"），看似“规范”，但实际有严重缺陷：
- Safari（含 iOS）直到 2026 年仍不支持，降级为普通文本框且无任何格式控制
- 用户无法粘贴
rgb(255,0,0)或red，也不能编辑已选颜色的数值 - 无法与现有表单验证逻辑（如 Yup、Zod、HTML5 constraint validation API）集成
- 服务端收到的值虽是
#rrggbb，但前端无法在输入过程中实时反馈格式错误
在线编辑器里更推荐用 input[type="text"] + JS 实时标准化
纯 pattern 只做提交前校验，体验割裂。在线编辑器场景下，应配合 JS 实现：
- 监听
input事件，自动补全#、转大写为小写、截断超长、补零（如#f0→#0f00？不，应拒绝或提示） - 用
setCustomValidity()动态控制错误提示，比pattern更灵活 - 兼容简写：用户输
#f00，自动转成#ff0000；输fff，自动加#并展开 - 注意：不要自动修正为无效值（如
#ggg），而应标记为 invalid 并阻止提交
真正难的不是写对正则，而是处理用户各种“以为能输”的输入习惯——比如粘贴 rgba(255,0,0,0.5)、拖拽色块生成 HSL 字符串、从设计工具复制带空格的 #FF6B35 。这些都得靠 JS 拦截和归一化，pattern 做不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
