如何使用tabindex-Javascript而不是jquery来查找元素

您必须获得当前元素的tabindex，添加1，然后搜索具有该tabindex的元素以将焦点设置为：

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

这个怎么样

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;
    }
}

获取下一个ID并聚焦它。如果它存在：

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();
  }
}

基本上，上面的代码是基于以下示例：

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

这是我刚刚编写的一个实现。它有点复杂，因为它过滤掉隐藏和禁用的输入，并处理具有相同选项卡索引的多个元素。到目前为止，它只在Firefox中进行了测试。

咖啡：

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
};