如何使用tabindex查找元素 - JavaScript而非jQuery

Question

在一个元素中输入数据后，我想将焦点移动到下一个元素。

如何使用tabindex获取下一个元素并移动焦点。

我正在使用扫描仪进行数据录入。所以，按键松开后的一秒延迟将告诉是否输入了数据。由于是扫描仪，用户不会使用浏览器的标签切换功能。

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

我看到了一些回答，都是用jQuery实现的。那么如何用JavaScript来实现呢？

- zod

---

你的浏览器不会在按下Tab键时自动完成吗？而且，你如何知道用户何时已经完成输入？每次按键时更改焦点似乎真的很烦人。 - adeneo

我正在使用扫描仪进行数据输入。因此，按键松开后一秒钟的延迟将告诉我们是否已输入数据。由于这是扫描仪，用户无法通过浏览器进行标签切换。 - zod

这只是一个简单的一行代码来回答问题，即如何获取具有（已定义的）tabindex的元素，而不解决所述问题：让tabs = document.querySelectorAll（“[tabindex ='0']”）; - Mike

Answer 1

您需要获取当前元素的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();
    }
}

点此查看样例代码

- adeneo

Answer 2

获取下一个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');

- Cesar Devesa

---

不要循环，这使它比其他方法更有效率。 - JohnnyB

Answer 3

如此类似的东西怎么样？

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

- Elliott Frisch

Answer 4

这是我刚写的一个实现。它更加复杂，因为它过滤了隐藏和禁用的输入，并处理具有相同标签索引的多个元素。目前只在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
};

- tremby