gpt4 book ai didi

JavaScript 输入焦点切换

转载 作者:行者123 更新时间:2023-12-03 06:01:24 25 4
gpt4 key购买 nike

我在我的一个新的网络应用程序中使用了以下代码,尽管我似乎无法让它正常工作。我希望能够加载页面,然后如果客户端点击“Tab”键然后它只会聚焦到另一个输入字段。只有 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();
}
}
}

最佳答案

我假设您正在使用 JQuery,因为您在 javascript 中使用了 $,所以我在这个假设下编写了这个示例。我假设您希望它按 Tab 键进入该字段,所以如果他们按下 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>

关于JavaScript 输入焦点切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39736044/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com