enterkeyhint是html input/textarea的原生属性，用于提示移动端软键盘回车键文案（如“搜索”“发送”），仅chromium系浏览器及safari 16.4+支持，firefox不支持；需配合type、autocomplete使用才可能生效，非强制生效。
enterkeyhint 是什么，哪些浏览器支持
enterkeyhint 是 HTML input 和 textarea 元素的原生属性，用于提示移动端软键盘显示哪个语义化的“回车键”文案（比如“搜索”“发送”“下一步”）。它不改变表单提交行为，只影响键盘 UI。
目前仅 Chromium 内核（Chrome、Edge、Opera）和 Safari 16.4+ 支持。Firefox 尚未实现。实际项目中需配合 type 和 autocomplete 使用才能生效，单独设置常被忽略。
可选值及对应软键盘表现
合法值只有四个：enter、done、go、next、previous、search、send。注意大小写敏感，且必须是小写字符串。
常见映射关系：
-
search→ 键盘显示“搜索”（iOS/Android 均较稳定） -
send→ 多数 Android 显示“发送”，iOS 可能 fallback 为“换行” -
next→ 触发焦点跳转到下一个可聚焦元素（需 DOM 顺序合理） -
done→ iOS 常显示“完成”，Android 可能显示“确定”或无变化
值不是万能开关：若输入框 type="text" 但 autocomplete="off"，部分 Android 键盘仍可能忽略 enterkeyhint。
必须配合的 HTML 属性才能生效
单独写 enterkeyhint="search" 很容易无效。关键要满足以下组合条件：
-
type推荐设为search、url、text或email；type="number"或type="password"通常不触发 -
autocomplete建议显式设置，如autocomplete="search"或autocomplete="off"（某些 Android 版本要求非空值） - 避免同时设置
onkeydown拦截Enter键，否则软键盘行为与 JS 逻辑可能冲突
示例写法：
<input type="search" enterkeyhint="search" autocomplete="search">
<input type="text" enterkeyhint="send" autocomplete="off">
为什么有时改了没反应？几个典型坑
真实调试中最常踩的几个点：
- 在桌面 Chrome 模拟移动设备时，
enterkeyhint不渲染——它只对真机或 WebView 生效 - iOS Safari 要求页面已获得焦点（用户至少点过一次输入框），首次加载后直接 JS focus() 可能不触发键盘更新
- Vue/React 中动态绑定
enterkeyhint（如:enterkeyhint="hint"）需确保属性名拼写正确；框架可能过滤未知属性，建议用v-bind或setAttribute强制设置 - 某些国产安卓键盘（如华为、小米）完全无视该属性，此时需降级用 placeholder 提示用户按“搜索”键
最稳妥的做法：把 enterkeyhint 当作增强体验的可选提示，而非功能依赖项。真正重要的交互逻辑（如搜索触发）仍应由 form submit 或 keydown.enter 保障。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
