如何修改登录页面Tab切换顺序？tabindex设置无效的解决方案

现有代码的问题分析 #

1. CSS代码无效：tabindex是HTML属性，不是CSS属性，你的CSS规则无法修改Tab顺序。
2. JS代码逻辑错误：用wrap包裹元素并给容器设置tabindex不会改变内部表单元素的Tab顺序，且你的HTML转义存在语法错误（第一个容器的闭合标签不完整）。

解决方案 #

方法1：直接修改元素的tabindex属性 #

通过JS直接给目标元素设置tabindex属性，强制指定Tab顺序：

$(function() {
  $("#signInName").attr("tabindex", 1);
  $("#password").attr("tabindex", 2);
  $("#forgotPassword").attr("tabindex", 3);
});

方法2：调整DOM元素顺序（推荐，符合无障碍规范） #

Tab键默认按DOM节点的顺序遍历，直接把Password元素移到Forgot密码按钮前面，无需额外设置tabindex，这是更自然的解决方案：

$(function() {
  const forgotBtn = $("#forgotPassword");
  $("#password").insertBefore(forgotBtn);
});

注意事项 #

• 确保jQuery已正确加载（你的HTML里引入了jQuery 3.7.0，这部分没问题）。
• 若$(function(){})不生效，可尝试监听DOMContentLoaded事件确保DOM完全渲染后执行代码：

window.addEventListener('DOMContentLoaded', function() {
  // 插入上述任一解决方案代码
});

• 避免使用超过32767的tabindex值，部分浏览器会忽略超出范围的数值。

内容的提问来源于stack exchange，提问作者Jamil