我如何找到一个使用tabindex的元素 - Javascript不jQuery

我想将焦点移到下一个元素后，数据输入一个元素。我如何找到一个使用tabindex的元素 - Javascript不jQuery

我怎样才能得到使用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

来源

2013-11-27 zod

不您的浏览器做时自动Tab键被按下时，你会怎么知道用户已经完成打字，只是改变每次按键时的焦点似乎真的很烦人。 – adeneo

我正在使用扫描仪进行数据输入。因此按键上的一秒延迟将告知数据是否输入。因为它是扫描仪没有用户的浏览器标签。 – zod

你必须得到当前元素的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

来源

2013-11-27 18:44:46 adeneo

这是有效的。谢谢 – zod

如何像这样

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

来源

2013-11-27 18:47:42

这是我刚写的实现。它有点复杂，它可以过滤隐藏和禁用的输入，并使用相同的Tab索引处理多个元素。目前它只在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 
};

来源

2016-08-27 01:45:22 tremby

我如何找到一个使用tabindex的元素 - Javascript不jQuery

回答

相关问题