I am trying to move focus to the next element after data is entered in one element.

How can i get the next element using tabindex and move focus.

i am using scanner for data entry. so one second delay on key up will tell data entered or not. As it is scanner no browser tabbing by user .

<tr>
<td class='form'  align='center'> <input type='text' tabindex=1 onkeyup='moveNext(this);' id='from' name='elem1' size='5'  value=''>    </td>
    <td class='form'  align='center'><input type='text' tabindex=2   onkeyup='moveNext(this);' id='item' name='elem2' size='5'  value=''>   </td>
    <td class='form' align='center' >   <input  type='text' tabindex=3   id='calc_price' size='10'  name='elem3' value=''>  </td>
</tr>

I saw some answers. All in jquery . How can i do that in javascript

I am trying to move focus to the next element after data is entered in one element.

How can i get the next element using tabindex and move focus.

i am using scanner for data entry. so one second delay on key up will tell data entered or not. As it is scanner no browser tabbing by user .

<tr>
<td class='form'  align='center'> <input type='text' tabindex=1 onkeyup='moveNext(this);' id='from' name='elem1' size='5'  value=''>    </td>
    <td class='form'  align='center'><input type='text' tabindex=2   onkeyup='moveNext(this);' id='item' name='elem2' size='5'  value=''>   </td>
    <td class='form' align='center' >   <input  type='text' tabindex=3   id='calc_price' size='10'  name='elem3' value=''>  </td>
</tr>

I saw some answers. All in jquery . How can i do that in javascript

• javascript

• 1 Doesn't your browser do that automatically when the tab key is pressed, and how would you know that the user has finished typing, just changing the focus everytime a key is pressed seems really annoying. – adeneo Commented Nov 27, 2013 at 18:39
• 1 i am using scanner for data entry. so one second delay on key up will tell data entered or not. As it is scanner no browser tabbing by user . – zod Commented Nov 27, 2013 at 18:42
• Just a one-liner to answer the question basically, how to get elements with (a defined) tabindex and not solving the explained problem: let tabs = document.querySelectorAll("[tabindex='0']"); – Mike Commented Apr 1, 2022 at 18:45

4 Answers 4

You'd have to get the tabindex of the current element, add 1 and then search for an element with that tabindex to set the focus to :

function moveNext(elem) {
    var tidx  = +(elem.getAttribute('tabindex')) +1,
        elems = document.getElementsByTagName('input');

    for (var i=elems.length; i--;) {
        var tidx2 = elems[i].getAttribute('tabindex');
        if (tidx2 == tidx) elems[i].focus();
    }
}

FIDDLE

How about something like this

function moveNext(tabInput) {
  var lastTab = 3;
  var curIndex = tabInput.tabIndex;
  var tabs = document.getElementsByTagName("input");
  if(curIndex >= lastTab) { //if we are on the last tab then go back to the beginning
    curIndex = 0;
  }
  for(var i=0; i < tabs.length; i++) { // loop over the tabs.
    if(tabs[i].tabIndex == (curIndex+1)) { // is this our tab?
        tabbables[i].focus(); // Focus and leave.
        break;
    }
}

Get the next ID and focus it. If it exists:

let i = document.activeElement.tabIndex;
if(i >= 0){
  let iNext = document.querySelectorAll("[tabindex='"+(i+1)+"']");
  if(iNext.length > 0){
    elNext = iNext[0].getAttribute('id');
    document.getElementById(elNext).focus();
  }
}

Basically the code above is based on the following example:

document.querySelectorAll("[tabindex='2']")[0].getAttribute('id');

Here's an implementation I just wrote. It's a bit more sophisticated in that it filters out hidden and disabled inputs, and handles multiple elements with the same tab index. It's tested only in Firefox so far.

Coffee:

getElementsInTabOrder = (form) ->
    # Get all focusable form elements
    elements = Array.prototype.filter.call form.elements, (element) ->
        return false if element.type is 'hidden'
        return false if element.disabled
        return true

    # Get elements grouped by tab index
    elementsByTabIndex = []
    for element in elements
        tabIndex = element.tabIndex
        unless elementsByTabIndex[tabIndex]?
            elementsByTabIndex[tabIndex] = []
        elementsByTabIndex[tabIndex].push element

    # Flatten to output array
    return [].concat elementsByTabIndex...

getElementByDelta = (element, delta, wrap = true) ->
    elements = getElementsInTabOrder element.form
    length = elements.length
    index = elements.indexOf element
    targetIndex = index + delta

    # Deal with edge cases
    while targetIndex < 0
        return null unless wrap
        targetIndex += length
    while targetIndex >= length - 1
        return null unless wrap
        targetIndex -= length

    return elements[targetIndex]

getNextElement = (element, wrap = true) ->
    return getElementByDelta element, 1, wrap

getPreviousElement = (element, wrap = true) ->
    return getElementByDelta element, -1, wrap

module.exports = {
    getElementsInTabOrder
    getElementByDelta
    getNextElement
    getPreviousElement
}

Javascript:

// Generated by CoffeeScript 1.10.0
var getElementByDelta, getElementsInTabOrder, getNextElement, getPreviousElement;

getElementsInTabOrder = function(form) {
  var element, elements, elementsByTabIndex, i, len, ref, tabIndex;
  elements = Array.prototype.filter.call(form.elements, function(element) {
    if (element.type === 'hidden') {
      return false;
    }
    if (element.disabled) {
      return false;
    }
    return true;
  });
  elementsByTabIndex = [];
  for (i = 0, len = elements.length; i < len; i++) {
    element = elements[i];
    tabIndex = element.tabIndex;
    if (elementsByTabIndex[tabIndex] == null) {
      elementsByTabIndex[tabIndex] = [];
    }
    elementsByTabIndex[tabIndex].push(element);
  }
  return (ref = []).concat.apply(ref, elementsByTabIndex);
};

getElementByDelta = function(element, delta, wrap) {
  var elements, index, length, targetIndex;
  if (wrap == null) {
    wrap = true;
  }
  elements = getElementsInTabOrder(element.form);
  length = elements.length;
  index = elements.indexOf(element);
  targetIndex = index + delta;
  while (targetIndex < 0) {
    if (!wrap) {
      return null;
    }
    targetIndex += length;
  }
  while (targetIndex >= length - 1) {
    if (!wrap) {
      return null;
    }
    targetIndex -= length;
  }
  return elements[targetIndex];
};

getNextElement = function(element, wrap) {
  if (wrap == null) {
    wrap = true;
  }
  return getElementByDelta(element, 1, wrap);
};

getPreviousElement = function(element, wrap) {
  if (wrap == null) {
    wrap = true;
  }
  return getElementByDelta(element, -1, wrap);
};

module.exports = {
  getElementsInTabOrder: getElementsInTabOrder,
  getElementByDelta: getElementByDelta,
  getNextElement: getNextElement,
  getPreviousElement: getPreviousElement
};