enterkeyhint 是用于指定软键盘回车键显示文案的 html 属性,仅影响移动设备软键盘右下角按钮文字(如 send、search),不改变实际行为;需作用于可聚焦的 input 或 textarea 元素,且依赖移动端环境与浏览器支持。

enterkeyhint 是什么,改不了但能选
enterkeyhint 不是“回车键样式”或“按键行为”,它只是告诉浏览器你希望回车键在软键盘上显示成什么文字(比如 send、search、go),实际按下去仍然触发 submit 或 input 事件,不会自动跳转或发送请求。浏览器支持程度有限,iOS Safari 完全忽略它,Android Chrome 和 WebView 支持较好,但仅影响软键盘右下角按钮文案。
怎么设置 enterkeyhint 才有效
必须加在可聚焦且有输入语义的元素上,常见场景是 <input> 和 <textarea></textarea>。不能加在 <div contenteditable> 上(无效),也不能加在禁用状态(<code>disabled)的输入框上。
-
enterkeyhint="send":适合聊天输入框,软键盘显示「发送」 -
enterkeyhint="search":搜索框推荐,显示「搜索」 -
enterkeyhint="go":跳转类场景,如 URL 输入后进入页面 -
enterkeyhint="done":表单末尾,表示完成编辑(部分 Android 键盘会显示「完成」)
示例:
<input type="text" enterkeyhint="search" placeholder="搜点什么">
为什么设置了没反应?常见失效原因
不是代码写错了,而是环境不满足:
- 在桌面 Chrome 浏览器里测试——
enterkeyhint只对移动软键盘生效,桌面键盘无视它 - 用了
type="number"或type="email"——某些安卓键盘会强制覆盖为数字/邮箱专用回车,忽略enterkeyhint - 父容器有
transform或iframe嵌套——部分 Android WebView 渲染层会丢弃该属性 - 没加
inputmode配合——比如inputmode="search"能进一步提示键盘类型,提升enterkeyhint生效概率
想真正控制回车行为?得靠 JS
enterkeyhint 不改变逻辑,要拦截或重定义回车动作,必须监听 keydown 或 keypress:
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.code === 'Enter') {
e.preventDefault(); // 阻止默认提交
// 自己处理:发消息、跳转、blur 等
}
});
注意:e.key === 'Enter' 比 e.keyCode === 13 更可靠;如果 input 在 form 里,还要防止表单自动 submit,要么加 onsubmit="return false",要么在 JS 里 e.preventDefault()。
软键盘文案和实际行为是两件事,别指望改了 enterkeyhint 就能绕过事件监听。











