实现HTML表单输入框按回车键自动切换焦点-html教程-PHP中文网

回车键触发 focus() 失效的常见原因包括：未调用 event.preventdefault() 阻止表单默认提交行为；目标元素未渲染或为 disabled/readonly；contenteditable 或自定义组件不支持原生 focus()；硬编码 dom 查找易断裂；应改用 form.elements 按 html 顺序自动查找下一个可聚焦项。

实现html表单输入框按回车键自动切换焦点

回车键触发 focus() 失效的常见原因

直接在 input 的 onkeydown 里写 event.key === 'Enter' && nextInput.focus() 经常没反应，不是代码写错了，而是浏览器默认行为干扰了焦点转移。比如在 type="search" 或某些表单提交上下文中，回车会触发表单提交或清空搜索框，focus() 被打断甚至被忽略。

必须调用 event.preventDefault() 阻止默认行为（尤其是 form 内的回车）
nextInput 必须已渲染且非 disabled / readonly
若目标元素是 contenteditable 或自定义组件，focus() 不一定生效，优先用原生 input、textarea

用 tabindex 控制切换顺序比手动找 DOM 更可靠

硬编码 document.getElementById('name') → document.getElementById('email') 容易断裂；改个 ID 就失效。更稳的方式是利用浏览器原生的 tabindex 流，按 DOM 顺序自动推进。

所有要参与切换的 input 设置相同 tabindex 值（如 tabindex="0"），确保它们可聚焦
在事件处理中调用 element.nextElementSibling 或遍历 form.elements 查找下一个可聚焦项
推荐用 form.elements：它天然按 HTML 顺序排列，且自动排除 disabled 元素

form.addEventListener('keydown', e => {
  if (e.key !== 'Enter') return;
  const inputs = Array.from(form.elements).filter(el => 
    el.tagName === 'INPUT' && !el.disabled && el.type !== 'hidden'
  );
  const idx = inputs.indexOf(e.target);
  if (idx >= 0 && idx <h3>移动端软键盘回车键可能不触发 keydown</h3><p>iOS Safari 和部分安卓输入法（尤其拼音键盘）把“回车”映射为“换行”或“搜索”，<code>key</code> 值可能是 <code>'Enter'</code>，也可能是 <code>'\n'</code>，甚至不触发 <code>keydown</code>，只触发 <code>input</code> 或 <code>change</code>。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img
														src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a>
													<p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>