HTML全局属性enterkeyhint在聊天界面优化发送按钮的体验-html教程-PHP中文网

enterkeyhint="send"仅提示软键盘显示“发送”文字，不触发发送行为；必须手动监听keydown事件、阻止默认换行（event.preventdefault()）、检测iscomposing和shiftkey，并调用sendmessage()才能实现纯enter提交、shift+enter换行的完整交互。

html全局属性enterkeyhint在聊天界面优化发送按钮的体验

加 enterkeyhint="send" 不会让消息自动发送，它只改软键盘右下角按钮的文案；是否发送、换行还是失焦，全由你绑定的 JS 事件逻辑决定。

为什么设了 `enterkeyhint="send"` 却没反应

这不是属性写错了，是浏览器根本没打算替你执行发送动作。该属性只是向输入法/软键盘发一个语义提示，iOS Safari（截至 17.5）仍不支持，安卓 Chrome 和 Samsung Internet 支持较好，但部分国产 WebView（如微信 X5 内核）会静默忽略。

enterkeyhint 不触发任何事件，也不调用 submit 或 click
用户点击软键盘上的「发送」后，实际触发的仍是 keydown 或 input 事件
若未监听 Enter 键或未调用 event.preventDefault()，textarea 会默认换行，input 可能失焦或触发表单提交
在 React/Vue 等框架中，若组件封装了原生 input 且未透传 enterkeyhint，该属性不会落到真实 DOM 节点上

`textarea` 上设 `enterkeyhint="send"` 为什么还换行

因为 textarea 的默认行为就是按 Enter 换行，enterkeyhint 不覆盖该行为，只建议软键盘显示什么文字。iOS 多数键盘仍显示「换行」或「搜索」，Android 小米、OPPO 等厂商键盘甚至直接忽略该属性。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

必须监听 keydown，判断 event.key === 'Enter' 且 !event.shiftKey
调用 event.preventDefault() 阻止换行，再手动调用 sendMessage()
检测 event.isComposing，避免中文输入中途被误提交
想兼容换行需求？约定 Shift+Enter 换行，纯 Enter 提交——这是目前最广泛接受的交互方式

用 `input` 还是 `textarea` 更适合聊天输入框

如果追求软键盘「发送」提示稳定生效，优先用 input type="text"，而非 textarea。前者是单行语义，enterkeyhint 在 Android Chrome、Samsung Internet 和企业微信 WebView 中响应更可靠；后者天生多行，系统优先尊重其换行行为，enterkeyhint 几乎无效。

视觉上要做多行效果？用 CSS 模拟：white-space: pre-wrap; overflow-y: auto; height: 80px;
搭配 inputmode="text" 可强化输入意图，比单独 enterkeyhint 更有效
避免 type="textarea" 写法——HTML 中没有这种类型，<input type="textarea"> 是无效标签，属性不生效
iOS Safari 对 input 的 enterkeyhint="send" 响应依然弱，需 UA 检测后 fallback 到 textarea + onkeydown 方案