enterkeyhint="next" 仅在 <input> 或 <textarea> 中且 type 为 text、email、search 等纯文本类型时生效，它仅提示软键盘显示“下一个”按钮，不自动跳转；需配合 keydown 监听 Enter 键、手动 focus 下一可聚焦元素，并预防默认提交。
enterkeyhint="next" 在什么情况下才生效
这个属性只对 <input> 或 <textarea> 有效，且必须配合 type 和表单结构使用。纯文本框（如 type="text"、type="email"、type="search"）才可能触发 next 键提示；type="number" 或 type="password" 多数浏览器会忽略或 fallback 到 done。
更关键的是：它不会自动跳转到下一个元素——只是告诉软键盘“建议显示‘下一个’按钮”，是否响应、怎么响应，完全取决于你自己的 JavaScript 监听逻辑。
如何让按下 next 键真正跳转到下一项
必须监听 keydown 事件，捕获 Enter 或软键盘的 next 键（实际仍上报为 Enter），然后手动 focus 下一个可聚焦元素。
- 用
event.key === "Enter"判断，不要依赖event.code—— 软键盘不保证发Entercode - 推荐用
element.nextElementSibling或预设的data-next-id属性定位目标，避免硬编码索引 - 记得检查下一个元素是否可聚焦：
nextEl && nextEl.offsetParent !== null && nextEl.tabIndex !== -1 - 调用
nextEl.focus()后，最好加event.preventDefault()防止表单默认提交
常见失效原因和绕过方式
很多开发者发现设了 enterkeyhint="next" 却没反应，大概率是这些原因：
立即学习“前端免费学习笔记（深入）”；
- 目标元素没有
tabindex="0"或不是原生可聚焦标签（如<div>默认不可 focus） - 下一个元素被
display: none或visibility: hidden遮挡，offsetParent为null - 移动端 WebView（尤其 iOS UIWebView）根本不支持
enterkeyhint，需降级为监听blur+ 自动 focus 下一个 - Vue/React 等框架中，DOM 更新异步，
focus()可能执行过早，需用nextTick或requestAnimationFrame
一个最小可用示例
<input type="text" enterkeyhint="next" data-next-id="phone">
<input type="tel" id="phone" enterkeyhint="next" data-next-id="email">
<input type="email" id="email">
<script>
document.addEventListener('keydown', e => {
if (e.key !== 'Enter') return;
const nextId = e.target.dataset.nextId;
if (!nextId) return;
const nextEl = document.getElementById(nextId);
if (nextEl && nextEl.offsetParent) {
nextEl.focus();
e.preventDefault();
}
});
</script>
注意：iOS Safari 对 enterkeyhint 支持有限，Android Chrome 较稳定；真机测试比模拟器更可靠。别指望它“开箱即用”，软键盘行为始终是平台+输入法+浏览器三方博弈的结果。
