when you press tab then it should tab to next blank text input box javascript without using tab index

Question

Example in a form there are multiple input fields, in that there are some fields that are auto-filled before then if I press tab then it should skip that auto-filled input field and should go to blank input field

I tried it but what happens when I start writing in the blank input it also taking as auto-filled and skipping that too

$(".item-input").keyup(function () {
    if (this.value.length !== 0) {
        var $next = $(this).next('.item-input');
        if ($next.length)
            $(this).next('.item-input').focus();
        else
            $(this).blur();
    }
});

wouldn't you want to focus `$next`, and check it's `value` for `length`? The initial `length` property would be the jquery selector length I think. Also, you are just acting on keyup, but not validating that the key that was pressed was the `tab` key — Icepickle, Sep 01 '19 at 22:18

score 1 · Answer 1 · answered Sep 01 '19 at 22:41

I would change the event to keydown instead of keyup, as keyup will already have processed the tab event itself, and there is no real cancelling you could do at that time (you will visually see it jump to the next field, before the next empty code has been selected)

For the rest, I would suggest you get all the elements first, and then check which field had the event triggered, and start checking the other fields from index + 1

So in large, I guess I would code something like the following ( no need to blur the field you are currently on, focus on the new field would do)

There is a handle for shiftKey so that users can still use shift+tab to go one back :) (I commented in the link from where that check came from)

let itemInputs = Array.from( document.querySelectorAll('.item-input') );

$('.item-input').on('keydown', function( e ) {
  if (e.shiftKey) {
    // no handling here
    // see: https://stackoverflow.com/questions/3044083/what-is-the-key-code-for-shifttab
    return;
  }
  switch (e.keyCode) {
    case 9:
      // we could have the loop in here, but hey, default returns out of the function
      // so this just skips till behind the switch statement
      break;
    default:
      return;
  }
  // find where we are in the original fieldset
  let index = itemInputs.findIndex( v => e.target === v ) + 1;
  // if we are equal or larger then itemInputs
  while (index < itemInputs.length) {
    if (itemInputs[index].value.length === 0) {
      // prevent the default step
      e.preventDefault();
      itemInputs[index].focus();
      return;
    }
    // try next
    index++;
  }
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
  <div class="field">
    <span class="label">Text 1</span>
    <span class="value"><input type="text" value="" class="item-input" /></span>
  </div>
  <div class="field">
    <span class="label">Text 2</span>
    <span class="value"><input type="text" value="Skip me" class="item-input" /></span>
  </div>
  <div class="field">
    <span class="label">Text 3</span>
    <span class="value"><input type="text" value="" class="item-input" /></span>
  </div>
  <div class="field">
    <span class="label">Text 4</span>
    <span class="value"><input type="text" value="" class="item-input" /></span>
  </div>
</fieldset>

thank you very much @icepickle this is exactly what i looking for — nareshbabu Nuli, Sep 02 '19 at 09:17
@nareshbabuNuli You are welcome, if it helped you, don't forget to mark the answer as an answer (you could tick the checkbox near my answer) — Icepickle, Sep 02 '19 at 09:39

when you press tab then it should tab to next blank text input box javascript without using tab index

1 Answers1