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中做到这一点

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

FIDDLE

Answer 2

这样的事情

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

Answer 3

这是我刚才写的一个实现。它有点复杂，它过滤掉隐藏和禁用的输入，并处理具有相同选项卡索引的多个元素。到目前为止，它仅在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
};

如何使用tabindex找到一个元素 - Javascript不是jquery

3 个答案: