Question

我有一个包含许多字段的表单，我已经给出了每一个输入，选择并按下tabindex数字。这有效，但我想以编程方式进行。

默认的tabindex顺序不正确，因为我有一个两列布局，每列都有组。我想自上而下的小组。如何编写body.onload函数，以便根据包含的div为所有输入，select和button标签分配tabindex数？例如，对于我希望首先循环的div，所有input，select和button标签都可以有tabindex=1，而第二个div中的所有input，select和button标签都可以{{1}等等。

谢谢！

这是一个简化的例子

tabindex=2

Answer 1

更灵活的Mike代码版本，它将tabIndex设置为Div ID中使用的数字。更改页面结构时也不需要修改。

忽略任何没有id或id与prefix-number模式不匹配的div。

<script> "use strict"; // place after </body> tag
  (function TabNumbers (pfx) {
    /* For all divs in the document with an id pfx followed by a number,
       set the tabIndex of all immediate children with tags of INPUT,
       SELECT, or BUTTON to the numeric value */
    pfx = new RegExp ('^' + pfx + '(\\d+)$');  
    for (var divs = document.getElementsByTagName ('div'), 
             el, m, i = divs.length; i--;) { // traverse all divs 
      if ((m = divs[i].id.match (pfx))) { // for those with id Div#
        for (el = divs[i].firstChild; el; 
             el = el.nextSibling) { // Traverse their child nodes
          if (el.tagName === 'INPUT' || el.tagName === 'SELECT' || 
              el.tagName === 'BUTTON') {
              el.tabIndex = +m[1];
          }         
        }
      }
    }
  }) ('Div');  
</script>

经过一番讨论后，修改了规范并接受了以下代码：

<script> "use strict"; // place after </body> tag
  (function TabNumbers () {
    var itags = ["INPUT", "SELECT", "BUTTON"]
      , tags
      , tag
      , el  
      , t
      , a
      ;

    while (itags.length) {
      for (tags = document.getElementsByTagName (itags.pop ()), t = tags.length; t--;) {
        el = tag = tags[t];
        while ((el = el.parentNode) && el.tagName) {
          if (el.getAttribute && (a = el.getAttribute ('data-tindex'))) { 
            tag.tabIndex = a;
            break;
          }
        }
      }     
    }
  }) ();    
</script>

在Chrome上测试

Answer 2

如果容器Div01等可以像您的示例中那样具有可排序的ID，则可以执行此操作

jquery解决方案

var groups = $('div[id^="Div"]').sort(function(a,b){
    return (a.id > b.id) ? 1 : -1;
});

groups.find(':input').each(function(idx){
    $(this).prop('tabindex', idx+1);
});

演示 http://jsfiddle.net/gaby/sNekS/

或者（，可能更正确）您可以重新排列div，以便它们在源中正确排序，并在呈现时仍显示在左/右组中（ 在内部div上使用float:left ），并且根本不使用脚本..

演示 http://jsfiddle.net/gaby/sNekS/1/

Vanilla Javascript解决方案 （将类group添加到Div##元素并将类input添加到输入/ select / etc元素之后）< / em>的

Answer 3

假设你正在使用Prototype（你可能不是），它看起来像这样：

Event.observe(window, 'dom:load', function() {
    var inputs = [$$('#div1 input, #div1 a'), $$('#div2 input')];

    var i = 0;
    inputs.each(function(inputList) {
        inputList.each(function(input) {
            i++;
            input.tabIndex = i;
        });
    });
});

注意：未经测试

Answer 4

<script type="text/javascript">
  function TabNumbers() { 
      var t = document.getElementById('Div01').childNodes;
      for (i = 0; i < t.length; i++) { 
          if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') {
              t[i].tabIndex = 1;
          }
      }
      var t = document.getElementById('Div02').childNodes;
      for (i = 0; i < t.length; i++) { 
          if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') {
             t[i].tabIndex = 2;
          }
      }
      var t = document.getElementById('Div03').childNodes;
      for (i = 0; i < t.length; i++) { 
          if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') {
             t[i].tabIndex = 3;
          }
      }
      var t = document.getElementById('Div04').childNodes;
      for (i = 0; i < t.length; i++) { 
          if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') {
             t[i].tabIndex = 4;
          }
      }
      var t = document.getElementById('Div05').childNodes;
      for (i = 0; i < t.length; i++) { 
          if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') {
             t[i].tabIndex = 5;
          }
      }
      var t = document.getElementById('Div06').childNodes;
      for (i = 0; i < t.length; i++) { 
          if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') {
             t[i].tabIndex = 6;
          }
      }
  }
</script>

用于分配tabindex数字的JavaScript函数？

4 个答案: