时间戳

首页 > 解决方案 > 编辑并单击 Enter 后在下一个 html 输入中设置焦点

javascript - 编辑并单击 Enter 后在下一个 html 输入中设置焦点

问题描述

我有 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>

谢谢你的帮助！

标签： javascripthtml

解决方案

正如 Nitin 在上面的评论中提到的，该Enter键主要用作按钮按下或提交表单。无论如何，请尝试此示例作为您的解决方案。

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>

推荐阅读