enterkeyhint="next"仅提示软键盘显示“下一个”按钮，不自动跳转焦点；必须监听keydown事件、判断Enter键、手动focus下一可聚焦元素，并preventDefault防止提交。
enterkeyhint="next"在表单中不跳焦点，为什么
它只改软键盘右下角按钮文案，不自动实现焦点切换。浏览器不会因为你写了enterkeyhint="next"就帮你调用.focus()或管理tabindex顺序。
常见失效场景：
-
input没设tabindex，或tabindex值不连续（比如跳了 1→3） - 下一个可聚焦元素被
display: none、visibility: hidden或disabled挡住 - 用了
form="xxx"但目标<form>里没有后续字段，或字段不在同一<form>内 - iOS Safari 完全忽略
next语义，只渲染文字，不触发任何逻辑
真正可控的做法是监听keydown，手动控制：
input.addEventListener('keydown', e => {
if (e.key === 'Enter' && e.code === 'Enter' && !e.isComposing) {
e.preventDefault();
const next = input.nextElementSibling?.matches('input, textarea')
? input.nextElementSibling
: document.querySelector('[data-next-field]');
next?.focus();
}
});
如何让多个输入框共享 enterkeyhint 语义但行为不同
不能靠一个全局配置统一控制，每个input得按角色单独设置enterkeyhint和配套逻辑。
立即学习“前端免费学习笔记（深入）”；
例如登录表单三字段：手机号 → 密码 → 登录按钮：
- 手机号：
<input type="tel" enterkeyhint="next">，回车后聚焦密码框 - 密码：
<input type="password" enterkeyhint="done">，回车收起键盘（iOS 更倾向响应done） - 登录按钮本身不是输入框，但可用
<button type="submit">配合form.onsubmit捕获最终提交
关键点：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
enterkeyhint值必须匹配用户操作预期，否则会误导——比如密码框写next但后面没字段，用户会困惑 - Android 键盘点击
next可能默认触发表单提交，需e.preventDefault()+ 手动focus() - 不要依赖 DOM 顺序做“下一个”，显式用
data-next-id或name属性绑定目标更可靠
inputmode 和 enterkeyhint 冲突时谁优先
inputmode优先级更高。它直接声明输入意图（如数字、邮箱、搜索），会强制调起对应虚拟键盘类型；而enterkeyhint只是对已调起键盘的右下角按钮提建议。
典型冲突现象：
-
<input type="text" inputmode="numeric" enterkeyhint="search">→ 键盘是数字键盘，“搜索”文案大概率被忽略，显示为“回车”或“完成” -
<input type="search" inputmode="text" enterkeyhint="send">→type="search"自带语义更强，inputmode="text"反而削弱搜索键盘特性，send提示难生效
推荐组合：
- 搜索框：
type="search"+inputmode="search"+enterkeyhint="search" - 手机号：
type="tel"+inputmode="tel"+enterkeyhint="next" - 纯文本多行聊天：
<textarea enterkeyhint="send">（比input更易在 WebView 中触发“发送”文案）
真机调试时 enterkeyhint 没变化，该查什么
DevTools 的设备模拟器不渲染软键盘 UI，看到属性存在 ≠ 键盘文案生效。必须真机测试。
排查路径：
- 确认页面有
<meta name="viewport" content="width=device-width, initial-scale=1">，缺失会导致 iOS 忽略软键盘优化 - 检查是否运行在微信 X5 内核、QQ 浏览器等 WebView 中——它们多数无视
enterkeyhint，尤其send和done - 用
console.log(input.enterKeyHint)验证 JS 是否能读到值（注意驼峰命名），排除拼写错误（如写成EnterKeyHint） - 换浏览器测试：Safari 16.4+、Chrome 90+、Samsung Internet 支持较好；Firefox 和旧版 Edge 直接不解析
最隐蔽的坑：框架封装的组件（如 React 的TextField、Vue 的v-model输入框）常未把enterkeyhint透传到底层<input>，得 inspect 元素看真实 DOM 是否带该属性。
