CODEWITHSUNDEEP
javascripthtml
Dmitriy Rudakov
Dmitriy Rudakov

Reputation: 109

set focus in next html input after editing and clicking enter

I have 3 inputs in html form.

I wrote html and copied js from another topic here. But I can't understand, what I need write down for working.

For example, I need after inserting data in input with id "tLogin" and clicking Enter moving focus on next input with id "tTable", and next move focus to input with id "tOrder". After entering data to tOrder return focus to 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/[email protected]/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>

Thank you for help!

Upvotes: 1

Views: 3413

Answers (2)

Anton
Anton

Reputation: 8508

As Nitin mentions in the comment above, the Enter key is mainly used as a button press or submitting the form. Anyway, try this example for your solution.

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/[email protected]/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>

Upvotes: 1

Kirill Savik
Kirill Savik

Reputation: 1278

Please use this code.

const ids = $(":input").toArray().map(val => val.id);
$(":input").keypress(function keyPressFunction(e) {
    const nextId = (ids.indexOf(document.activeElement.id) + 1) % ids.length;
    if (e.which === 13 || e.keyCode === 13 ) {
        document.getElementById(ids[nextId]).focus();
    }
    
});

Upvotes: 1

Related Questions