Set Focus to the Next Input Element

Set focus to the next input element

next(), nextAll(), and the other similar methods are for finding siblings. Since none of your inputs are actual siblings this will not work.

What you can do however is:

Get a jQuery object of all the enabled inputs
```
var enabledInputs = $("input:enabled");
```
Get the index of the current input in that jQuery object using index()
```
var idx = enabledInputs.index(this);
```
Then using that index get the element at index+1 using eq()
```
enabledInputs.eq(idx+1).focus();
```

Demo

$(":input").keydown(function(event){    if (event.keyCode === 13) {      var enabledInputs = $("input:enabled");      var idx = enabledInputs.index(this);      enabledInputs.eq(idx+1).focus()    }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="row">     <div class="col-3 pr-0">      <div class="form-group">       <label for="txtBarcode">Barcode</label>       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">      </div>     </div>     <div class="col-7 pl-2 pr-0">      <div class="form-group">       <label for="txtPartDesc">Description</label>       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>      </div>     </div>     <div class="col-2 pl-2">      <div class="form-group">       <label for="txtUom">UoM</label>       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>      </div>     </div>    </div>    <div class="row">     <div class="col-4 pr-0">      <div class="form-group">       <label for="txtQuantity">Quantity</label>       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">      </div>     </div>    </div>

How to set focus on next input when the button "Enter" is pressed? (javascript)

Something like this, could do the trick.

const container = document.getElementById("inputs-container");let inputs = document.getElementsByTagName("input");
// Add input on press Enterdocument.onkeyup = (evt) => {  if (evt.keyCode == 32) {    let input = document.createElement("input");    input.type = "text";    input.placeholder = "Input...";    input.onkeyup = inputOnEnter;    container.appendChild(input);    inputs = document.getElementsByTagName("input");  }};
// Focus next input on Spaceconst inputOnEnter = (evt) => {  if (evt.keyCode == 13) {          let index = Object.keys(inputs).filter(a => inputs[a] === evt.target);    let nextIndex = parseInt(index) + 1;
    if (inputs[nextIndex]) inputs[nextIndex].focus();  }};
for (let i = 0; i < inputs.length;i++) {  inputs[i].onkeyup = inputOnEnter;}

<div id="inputs-container">  <input type="text" placeholder="Input..." /></div>

How to focus on next input box after pressing enter. jquery

As the .address_field is the triggering element in the delegated event listener, there's no need to keep track of the index. You can simply use the .next() method to select the next .address_field. Then use .find(input=text) to select the input and set focus.

$('.add_address_section').on('keyup', '.address_field', function(e) {  if (e.keyCode == 13) {    e.preventDefault();    $(this).next().find('input[type=text]').focus();  }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="add_address_section">
  <div class="address_field">    <input type="text" class="add_address_field" name="field_name[]" value="">    <input type="button" class="remove_address_button" value="Remove Address">  </div>
  <div class="address_field">    <input type="text" class="add_address_field" name="field_name[]" value="">    <input type="button" class="remove_address_button" value="Remove Address">  </div>
</div>

How to set focus on next <input> within *ngFor directive

I managed to solve this issue with plain old Javascript

On my element inside *ngFor* I add a data attribute as

[attr.id]="x"

Based on the index value of the *ngFor.

In my keytab method I do the following

if (event.which === 13) {
    var target = event.target || event.srcElement || event.currentTarget;
    var id = target.attributes.id; // returns target element object
    var val = id.nodeValue; // gets node value of element
            
    if((+val + 1) < this.number) { //prevents focus to 'null' element
        document.getElementById(String(+val + 1)).focus(); //shifts focus to next element
    }
}

Getting focus on next input element anywhere on the page

Try this this will help you

$(document).ready(function() {  $('input').on("keypress", function(e) {
    if (e.which == 13) {      var tab = $(this).attr("tabindex") + 1      $("input[tabindex=" + tab + "]").focus();    }  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><div>  <table>    <tr>      <td>        <input type="text" tabindex="1" />      </td>    </tr>  </table></div><div>  <table>    <tr>      <td>        <input type="text" tabindex="2" />      </td>    </tr>  </table></div>

set focus in next html input after editing and clicking enter

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/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>

Setting the focus to the next input in jQuery?

Modified of the above answer with cached this jq object. Also the filter inside next is not needed. next() will only ever return the next sibling. The filter is basically saying get me the next only if it is an input or whatever filter you give. If you are sure the next is the desired object there is no need to include the filter.

$("#assessed select").change(function () {
    var $this = $(this);
    if( $this.val() === 'null') {
        $this.next()
             .attr("disabled", true);
    }
    else {
        $this.next()
             .removeAttr("disabled")
             .focus();
    }
});

Set Focus to the Next Input Element