我如何使用 tabindex 找到元素 - Javascript 而不是 jquery

How can i find an element using tabindex - Javascript not jquery

提问by zod

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.

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

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

我看到了一些答案。全部在 jquery 中。我怎么能在javascript中做到这一点

回答by adeneo

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 :

您必须获取当前元素的 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

小提琴

回答by Elliott Frisch

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

回答by tremby

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.

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

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:

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