enterkeyhint="search"在iOS上显示“换行”是因为iOS Safari 16.4+才真正支持该属性，15.4–16.3版本基本忽略，且必须搭配type="search"、元素已获焦点、非disabled/readonly，否则降级为enter或go；模拟器无效，国产安卓键盘也可能无视。
enterkeyhint="search"为什么在iOS上有时还是显示“换行”
它不是指令，只是建议。iOS Safari 16.4+ 才真正开始响应这个属性，15.4–16.3 版本基本静默忽略；即使支持，enterkeyhint="search" 也必须搭配 type="search"，否则大概率 fallback 到 enter 或 go。常见失效组合：type="text" + enterkeyhint="search" —— iOS 键盘根本不会改文案。
真机测试前别信模拟器：Chrome DevTools 的设备模式不触发软键盘渲染逻辑，看到的始终是 ↵ 符号。
-
type必须是search（不是text或url） - 元素得已获得焦点（用户手动点击过，或用
input.focus()后再弹出键盘） - 不能写在
disabled或readonly元素上 - 国产安卓键盘（华为、小米）可能完全无视该属性，属正常现象
加了enterkeyhint="search"却不触发submit，问题出在哪
enterkeyhint 不绑定任何事件，也不控制表单行为。点击“搜索”键是否提交，完全取决于表单结构和浏览器默认逻辑。
典型断点：
立即学习“前端免费学习笔记（深入）”；
- 表单没写
method或action，Chrome 认为无目标，只收起键盘 -
input不在<form>内，或用了form="xxx"但对应<form id="xxx">不存在 - 输入为空时，部分 Android 键盘（尤其旧版）点击
search键不触发 submit - 监听了
keydown并调用了event.preventDefault()，却没手动调用form.submit()
可靠做法是显式监听 submit 事件，而不是依赖浏览器默认行为。
怎么写才能让“搜索”键稳定出现并可控执行
关键不是单靠 enterkeyhint，而是三要素组合：type + enterkeyhint + submit 事件接管。
推荐写法：
<form id="searchForm"> <input type="search" inputmode="search" enterkeyhint="search" placeholder="搜商品"> </form>
JS 部分必须显式处理：
const form = document.getElementById('searchForm');
form.addEventListener('submit', (e) => {
e.preventDefault();
const q = form.querySelector('input').value.trim();
if (q) window.location.href = `/search?q=${encodeURIComponent(q)}`;
});
-
inputmode="search"是加分项，能进一步提示键盘意图（部分安卓键盘依赖它） - 不要用
onsubmit行内属性，容易被框架覆盖或遗漏 - Vue/React 中动态设置
enterkeyhint很可能失效，初始化时用setAttribute('enterkeyhint', 'search')更稳
Firefox 和老版本 iOS 完全不支持，怎么办
Firefox 当前（v128）压根不解析 enterkeyhint；iOS 16.3 及更早版本也当它不存在。这不是 bug，是规范未落地。
降级策略要务实：
- 视觉强化：在输入框右侧固定放一个
<button>搜索</button>，文案与键盘按钮一致，降低认知偏差 - placeholder 提示：“按搜索键或点击右侧按钮”
- 不把功能逻辑绑在
enterkeyhint上——它只负责提示，行为必须由 JS 显式控制 - 检测支持性仅作统计用：
'enterKeyHint' in document.createElement('input')返回 true 也不代表软键盘真响应
最易被忽略的一点：哪怕所有属性都写对了，微信 X5 内核、飞书 WebView 这类定制容器仍可能直接跳过该属性——把它当成可选体验增强，而非功能路径依赖。
