ios safari 中 type="search" 需包裹在含 action 属性的 内才显示“搜索”键；清除按钮应重置样式而非 display: none；name 和 label 属性不可省略以保障可访问性与功能完整性。
为什么 type="search" 在 iOS 上不显示“搜索”键
直接写 <input type="search">，在 iOS Safari 里键盘右下角大概率还是“换行”或“前往”，不是“搜索”。这不是 bug，是 iOS 的硬性规则：它只在 <form></form> 包裹 + action 属性存在时，才信任 type="search" 的语义并渲染对应按键。
常见错误包括：
- 只用
<input type="search">单独存在（无<form></form>）→ 键盘显示“换行” -
<form></form>没设action→ iOS 忽略type，仍显示“换行” -
action="#"或action="javascript:void(0)"→ 部分旧版 iOS 不认，建议用action="."或真实路径占位
如何让 form 正确触发“搜索”键且不刷新页面
必须用 <form></form> 包裹，并控制提交行为。最稳妥的组合是：
-
action设为非空值，如action="."或action="/search" - 用
onsubmit="return false;"阻止默认跳转（比event.preventDefault()更早生效） - 避免只靠
event.preventDefault()在keydown里拦截 —— 它晚于表单提交触发时机，可能已刷新
示例：
注意：不要在 <form></form> 里只放一个 type="search" 就完事。iOS 会把它当“单字段表单”自动提交，导致页面刷新。加个隐藏 <input type="text" style="display:none"> 是兼容老版本的兜底做法，但现代项目优先用 onsubmit 控制。
清除按钮（×）不能简单 display: none
很多开发者一上来就写 input[type="search"]::-webkit-search-cancel-button { display: none; }，结果发现：
- 触控设备上用户无法一键清空，尤其软键盘弹出后操作成本陡增
- VoiceOver 等读屏器可能完全感知不到该输入框支持清空功能
- Chrome/Safari 对该伪元素有最小点击热区要求（≥24×24px），隐藏后热区失效
正确做法是重置外观而非移除功能：
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: #999;
border-radius: 50%;
margin-right: 8px;
}
input[type="search"] {
padding-right: 32px; /* 保证手指可点区域足够 */
}
name 属性和可访问性不是可选项
name 决定后端收到的参数名，也影响分析工具埋点。通用命名如 q、keyword、query 能让路由、日志、A/B 测试系统自动识别；乱写成 searchInput 或留空会导致后端收不到值。
同时，placeholder 不是 label 的替代品。它在输入时消失，对屏幕阅读器不可靠。必须配 <label for="xxx"></label> 或包裹结构：
<label for="site-search">站内搜索</label> <input type="search" id="site-search" name="q">
漏掉 id 和 for 匹配 → 点击文字无法聚焦；只用 placeholder → 读屏器可能完全读不出这是搜索框。
真正容易被忽略的，是把 type="search" 当作“UI 组件”来用——它本质是语义开关，所有优化（键盘、清除、历史、无障碍）都依赖你没破坏它的原生行为链。删按钮、绕开 <form></form>、忽略 name 和 label，等于主动放弃浏览器给的免费能力。
