应使用 input type="search" 而非 type="text"，因其原生支持清空按钮、搜索键盘、历史下拉及无障碍识别；需配 name、form action 与 method="get"、label/aria-label；清空按钮样式受限，建议隐藏或自定义；提交逻辑应监听 form submit 而非 keydown；移动端聚焦需动态调整 body 样式防遮挡。
用 input type="search" 而不是 type="text"
浏览器对 type="search" 有原生支持，不是视觉差异问题，而是行为差异：自动带清空按钮、移动端软键盘显示“搜索”键、支持历史下拉、无障碍读屏会识别为搜索用途。换成 type="text" 就直接丢掉这些能力，还得自己补 JS 和 ARIA。
常见错误是只改了 type 却漏掉关键属性：
-
name必须设，比如name="q"或name="keyword"，否则表单提交时后端收不到值 -
form的action和method="get"要配对，否则点击搜索按钮没反应或跳错页 - 不加
label或aria-label会导致可访问性检测失败（尤其 WCAG 2.1）
清空按钮样式改不了？别硬刚伪元素
::-webkit-search-cancel-button 和 ::ms-clear 是浏览器 UA 控件，CSS 支持极不统一：Chrome 允许 appearance: none 隐藏，Safari 15.4+ 要加 -webkit-appearance: none，旧 Edge 根本不响应。强行覆盖尺寸/颜色基本无效。
更稳妥的做法：
- 想隐藏：用
input::-webkit-search-cancel-button { -webkit-appearance: none; }+input::-ms-clear { display: none; } - 想自定义：放弃原生按钮，用
div包裹input和一个绝对定位的button，监听input的input事件控制显隐 - 注意：自定义按钮要手动
focus()回输入框，否则键盘流中断
回车提交但不想跳转？监听 submit 事件，别碰 keydown
用 input.addEventListener('keydown', e => e.key === 'Enter' && e.preventDefault()) 看似简单，实际埋坑：移动端软键盘“搜索”键不一定触发 keydown；用户按 Tab 切出再回车，keydown 可能不在焦点上；还绕过了表单默认验证逻辑。
正确姿势是监听 form 的 submit 事件：
- 用
event.preventDefault()阻止跳转 - 用
new FormData(form).get('q')取值——它自动处理空格编码、trim、空值，比input.value.trim()更健壮 - 如果做 AJAX 搜索，记得禁用提交按钮防止重复点击：
form.querySelector('button').disabled = true
移动端聚焦后页面被顶起？别只调 viewport
iOS Safari 和部分安卓 WebView 在 input 获焦时会强制滚动到可视区顶部，导致搜索框被键盘遮住。光靠 <meta name="viewport" content="viewport-fit=cover"> 不够。
实测有效的组合方案：
- 给
body加position: fixed+top: -${window.scrollY}px锁定滚动（注意 scrollY 取值时机） - 在
focus事件里动态设置body.style.height = '100vh'，失焦恢复 - 关键：必须等
focus后的scroll事件触发再执行修正，否则时机不对
这些细节在桌面端完全不会暴露，但上线后 iOS 用户第一反馈往往就是“搜不了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
