type="search" 自带语义、默认清除按钮及平台差异，禁用需用 inputmode="text"+role="search" 组合并补充清空操作，提交行为与 type="text" 完全一致。
input type="search" 不是普通文本框的“美化别名”，它自带语义、默认样式和平台行为差异，用错反而会破坏可访问性或触发意外清空逻辑。
为什么 type="search" 会自动出现 × 清除按钮？
这是浏览器原生实现：当用户输入内容后，多数桌面浏览器（Chrome、Edge、Safari）会在右侧渲染一个可点击的清除按钮。这个按钮不是 CSS 伪元素，而是由 UA 样式控制的交互控件。
- 清除按钮只在有输入值时显示，点击后清空
value并触发input和change事件 - Firefox 默认不显示该按钮，需手动用
::-moz-search-cancel-button开启（但兼容性差，不建议强依赖） - 若用 JavaScript 直接赋值
input.value = ""，清除按钮会同步消失；但用input.value = " "（空格）则不会触发清除状态，按钮仍保留
如何禁用默认清除按钮又保留搜索语义？
禁用清除按钮不能靠 appearance: none 一招通吃——Safari 对 input[type=search] 的 ::-webkit-search-decoration 支持不稳定，且部分版本会连带隐藏搜索图标。
- 最稳妥方式是用
inputmode="text"+role="search"组合，保持语义但绕过 UA 控件：<input type="search" inputmode="text" role="search" aria-label="站内搜索">
- 若必须视觉上隐藏清除按钮，仅对 WebKit 内核生效：
input[type="search"]::-webkit-search-cancel-button { appearance: none; } - 注意：移除清除按钮后，需自行提供替代清空操作（如按钮或 ESC 键监听），否则键盘用户无法便捷清空
type="search" 和 type="text" 在表单提交时有区别吗？
没有。两者在序列化表单数据、提交行为、约束验证（如 required、pattern）上完全一致。区别只在语义、默认样式、以及部分辅助技术的处理方式。
- 屏幕阅读器通常将
type="search"读作“搜索编辑框”，而type="text"读作“编辑文本” - 移动端软键盘可能为
type="search"显示“搜索”回车键，但实际是否触发 submit 取决于是否在form内及是否有submit按钮 - 不要指望
type="search"自动防抖或节流——这些仍需 JS 实现，和类型无关
真正容易被忽略的是：如果你用 type="search" 却没配 label 或 aria-label，某些语音助手会直接跳过该控件；而清除按钮在高对比度模式下可能不可见，得靠 color-scheme: light dark 或显式设置图标颜色来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
