我有 3 个 html 形式的输入。
我在这里写了 html 并从另一个主题复制了 js。但我不明白，我需要写下工作。
例如，我需要在 ID 为“tLogin”的输入中插入数据并单击 Enter 将焦点移动到 ID 为“tTable”的下一个输入上，然后将焦点移动到 ID 为“tOrder”的输入。将数据输入到 tOrder 后，将焦点返回到 tLogin。
function keyPressFunction(e) {
const focus = $(document.activeElement); //get your active elememt ie select input
let inputView;
if (e.which === 13 || e.keyCode === 13 ) {
inputView = focus.closest('div').next().find(".field-focus"); // go to tbody and search for next class name .field-focus
}
inputView.show().focus(); //focus and show next input in table
} <!doctype html>
<html lang="en">
<head>
<title>CLR: PACKING</title>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<?!= include("index-css"); ?>
</head>
<body>
<div class="conteiner">
<form novalidate>
<h6 class="title">PACKING</h6>
<div class="dws-input">
<div class="col-md-3"></div>
<div>
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" novalidate id="tLogin" name= "username" placeholder= "Логин:" autofocus >
<label for="tLogin">Login:</label>
</div>
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" novalidate id="tTable" name= "text" placeholder= "Номер стола:" >
<label for="tTable">Table:</label>
</div>
</div>
<div class="form-floating mb-3 mt-3">
<input type="text" novalidate class="form-control" id="tOrder" name= "text" placeholder= "Заказ:" >
<label for="tOrder">Order:</label>
</div>
</div>
</form>
</div>
</body>
</html>谢谢你的帮助!
最佳答案
正如 Nitin 在上面的评论中提到的，Enter key 主要用作按钮按下或提交表单。无论如何，请尝试使用此示例作为您的解决方案。
const inputs = document.querySelector('.dws-input');
const formControl = document.querySelectorAll('.form-control');
formControl[0].focus();
function keyPressFunction(ev) {
if (ev.code !== 'Enter') return;
if (ev.target.value === '') return;
for (const i of formControl) {
if (i.value === '') {
i.nextElementSibling.focus();
break;
}
}
}
inputs.addEventListener('keydown', keyPressFunction);<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
<div class="conteiner">
<form novalidate>
<h6 class="title">PACKING</h6>
<div class="dws-input">
<div class="col-md-3"></div>
<div>
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" novalidate id="tLogin" name="username" placeholder="Логин:" autofocus />
<label for="tLogin">Login:</label>
</div>
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" novalidate id="tTable" name="text" placeholder="Номер стола:" />
<label for="tTable">Table:</label>
</div>
</div>
<div class="form-floating mb-3 mt-3">
<input type="text" novalidate class="form-control" id="tOrder" name="text" placeholder="Заказ:" />
<label for="tOrder">Order:</label>
</div>
</div>
</form>
</div>关于javascript - 编辑并点击回车后，在下一个 html 输入中设置焦点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68806351/