Question

我在我的新网络应用程序中使用了以下代码，但我似乎无法像它应该的那样工作..我希望能够加载页面，然后如果客户点击＆＃34;标签＆＃34;键然后它只是只关注其他输入字段。只有2个输入字段，这应该很容易（至少我认为：P）。无论如何，任何人都可以帮助我吗？在此先感谢：）

var body = document.querySelector('body');

body.onkeydown = function (e) {
    if ( !e.metaKey ) {
        // e.preventDefault();
    }
    if (e.code == "Tab") {
        console.log(e.code);
        if ($('#username').is(":focus")) {
            $('#password').focus();
        } else if ($('#password').is(":focus")) {
            $('#username').focus();
        }
    }
}

Answer 1

我假设您正在使用JQuery，因为您在javascript中使用$所以我在此假设下编写了此示例。我假设您希望它标记到字段中，无论如何，如果按Tab键，它默认为id="username"输入元素。我添加了一个preventDefault来停止正常的标签行为。看来，标签正常行为是导致它无法正常运行的原因。希望我没有误解你，这有帮助。

$("body").on("keydown", function(e) {
  if (e.which !== 9 && e.keyCode !== 9) {
    return;
  }
  console.log("Which Value:", e.which);
    console.log("KeyCode Value:", e.keyCode)

  e.preventDefault();
  if (!$('#username').is(":focus")) {
    $('#username').focus();
  } else {
    $('#password').focus();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <input id="username">
  <input id="password">
</body>

编辑：

如果你想在没有JQuery选择器的情况下这样做。这是另一个例子：

var body = document.getElementsByTagName("body");

body[0].onkeydown = function(e) {
  var username = document.getElementById("username");
  var password = document.getElementById("password");
  if (e.which !== 9 && e.keyCode !== 9 && e.code !== "Tab") {
    return;
  }
  e.preventDefault();
  if (document.activeElement !== username) {
    username.focus();
  } else {
    password.focus();
  }
}

<body>
  <input id="username">
  <input id="password">
</body>

Answer 2

简单地说，使用autofocus将默认焦点设置为UserID，并在用户按Tab键时使用tabindex移至密码。

UserId :<input type="text" name="fname" autofocus tabindex="1">
Password: <input type="text" name="fname2" tabindex="2">

Answer 3

你需要e.PreventDefault（）来阻止标签事件的传播和做它将要做的事情。仅忽略Tab键的事件传播。

body.onkeydown = function (e) {
    if (e.code == "Tab") {
        console.log(e.code);
        if ($('#username').is(":focus")) {
            $('#password').focus();
        } else if ($('#password').is(":focus")) {
            $('#username').focus();
        }
        e.preventDefault();
    }
}

还可以考虑在密码输入上设置type =“password”。

JavaScript输入焦点切换

3 个答案: