HTML无原生MAC输入控件，需用JavaScript监听input事件实时格式化（如自动添加冒号），兼顾光标位置、退格/粘贴处理；pattern仅提交时校验且不阻止非法输入，不可替代JS实时过滤；正则应为^([0-9A-Fa-f]{2}[:-]){5}[0-9A-Fa-f]{2}$，冒号兼容性优于短横线。
HTML 本身没有原生的 MAC 地址输入控件，<input type="text"> 是唯一可用基础元素；所谓“MAC 地址输入框”，本质是靠 JavaScript + 正则 + 键盘事件控制的带格式化能力的文本框，不是纯 HTML 能搞定的。
怎么让输入自动加冒号或短横线（如 00:1A:2B:3C:4D:5E）
靠监听 input 或 keydown 事件，在用户输入后实时格式化。关键点不是“加符号”，而是“不破坏光标位置”和“允许退格/删除/粘贴”：
- 优先用
input事件（兼容粘贴），配合setSelectionRange保存并恢复光标位置 - 正则建议用
/^([0-9A-Fa-f]{2}[:-]){5}[0-9A-Fa-f]{2}$/校验完整值，但格式化时只处理前 12 位十六进制字符 - 不要在每次按键后直接
value = xxx，否则光标会跳到末尾；必须先记录selectionStart，再设置value，最后用setSelectionRange恢复 - 粘贴场景要先
event.preventDefault()，清理非十六进制字符，再格式化
pattern 和 required 能不能替代 JS 校验？
不能。HTML5 的 pattern 只在表单提交时触发，且不阻止非法输入——用户依然可以输入 00g1A2B3C4D5E 并看到红框，但字段已脏。它只适合做提交前兜底，不能替代实时过滤：
-
pattern值应为"^([0-9A-Fa-f]{2}[:-]){5}[0-9A-Fa-f]{2}$"，注意开头^和结尾$必须写全，否则部分匹配也会通过 -
title属性要配套写清楚提示，比如title="格式示例：00:1A:2B:3C:4D:5E"，否则用户不知道错在哪 - 移动端键盘不会因
pattern变成十六进制键盘，仍需 JS 过滤非0-9A-Fa-f:-:字符
为什么用冒号（:）而不是短横线（-）更稳妥？
因为 Linux /sys/class/net/*/address、Windows ipconfig、Wireshark 抓包默认都用冒号分隔，短横线常见于 Cisco 设备或某些嵌入式 UI，但兼容性弱：
立即学习“前端免费学习笔记（深入）”；
- macOS 系统偏好设置里显示的是
00-11-22-33-44-55，但命令行ifconfig输出仍是冒号 - 若后端 API 明确要求短横线格式，前端格式化时统一转成短横线即可，但 UI 层建议保持冒号——避免用户复制粘贴时多一次替换
- 正则中冒号无需转义，短横线在字符组里（如
[:-]）要放首位或末位，否则会被误认为范围符，容易写错
真正难的不是写几行格式化代码，而是处理 iOS Safari 的粘贴光标偏移、Android 输入法的组合字符输入、以及用户手动删中间分隔符时的逻辑回溯——这些边界 case 比正则本身花更多调试时间。
