Функция JavaScript для назначения номеров tabindex? - PullRequest
Новая
       23

Функция JavaScript для назначения номеров tabindex?

7 голосов
/ 27 ноября 2011

У меня есть форма со многими полями, и я дал каждому отдельному вводу, выберите и нажмите номер табуляции. Это работает, но я хотел бы сделать это программно.

Порядок tabindex по умолчанию не правильный, потому что у меня есть макет из двух столбцов с группами в каждом столбце. Я хочу пойти сверху вниз по группе. Как я могу написать функцию body.onload, чтобы она присваивала всем тегам input, select и button тег tabindex на основе содержащего div? Например, для div, который я хочу просмотреть первым, все теги input, select и button могут иметь tabindex=1, а все теги input, select и button во втором div могут иметь tabindex=2, и поэтому на.

Спасибо!

Вот упрощенный пример 

<style>
  .a { display: inline-block;
       width:200px;
       border: 1px solid black;
  }
</style>


<div class="a">
    <div id="Div01" title="these inputs should have tabindex=1">
        <p>Div 01</p>
        <input id="Div01Field1" type="text" value="Me first"/>
        <input id="Div01Field3" type="text" value="Me second"/>
        <input id="Div01Field2" type="text" value="Me third"/>
        <hr>
    </div>
    <div id="Div03" title="these inputs should have tabindex=3">
        <p>Div 03</p>
        <input id="Div03Field1" type="text" value="Me seventh"/>
        <input id="Div03Field2" type="text" value="Me eighth"/>
        <input id="Div03Field3" type="text" value="Me ninth"/>
        <hr>
    </div>
    <div id="Div05" title="these inputs should have tabindex=5">
        <p>Div 05</p>
        <input id="Div05Field1" type="text" value="Me thirteenth"/>
        <input id="Div05Field2" type="text" value="Me fourteenth"/>
        <input id="Div05Field3" type="text" value="Me fifteenth"/>
    </div>
</div>
<div class="a">
    <div id="Div02" title="these inputs should have tabindex=2">
        <p>Div 02</p>
        <input id="Div02Field1" type="text" value="Me fourth"/>
        <input id="Div02Field2" type="text" value="Me fifth"/>
        <input id="Div02Field3" type="text" value="Me sixth"/>
        <hr>
    </div>
    <div id="Div04" title="these inputs should have tabindex=4">
        <p>Div 04</p>
        <input id="Div04Field1" type="text" value="Me tenth"/>
        <input id="Div04Field2" type="text" value="Me eleventh"/>
        <input id="Div04Field3" type="text" value="Me twelfth"/>
        <hr>
    </div>
    <div id="Div06" title="these inputs should have tabindex=6">
        <p>Div 06</p>
        <input id="Div06Field1" type="text" value="Me sixteenth"/>
        <input id="Div06Field2" type="text" value="Me seventeenth"/>
        <input id="Div06Field3" type="text" value="Me eighteenth"/>
    </div>
</div>

Ответы [ 4 ]

6 голосов
/ 30 ноября 2011

Более гибкая версия кода Майка, которая устанавливает tabIndex в число, используемое в идентификаторах Div. Это также не требует изменений при изменении структуры страницы.

Любой 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

3 голосов
/ 29 ноября 2011

Если контейнеры Div01 и т.д. могут иметь сортируемые идентификаторы, как в вашем примере, то вы можете сделать это

JQuery Solution 

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, чтобы они правильно сортировались в источнике и по-прежнему отображались в левой / правой группах при визуализации ( используя float:left на внутренних элементах div ), и вообще не используйте сценарии ..

Демо на http://jsfiddle.net/gaby/sNekS/1/

Решение Vanilla Javascript (после добавления класса group к элементам Div## и класса input к элементам ввода / выбора / и т.д.) 

var gnodes = document.getElementsByClassName('group'); // find elements with group class - non-sortable
var groups = []; // create empty array to hold groups - sortable
for (var i = 0, l = gnodes.length; i<l; i++){ // place elements in array so we can sort it
    groups.push( gnodes[i] );
}
groups.sort(function(a,b){ // sort the array based on id
    return (a.id > b.id) ? 1 : -1;
});

var counter = 1; // incremental number to define the tabindex
for (var i = 0, l = groups.length; i<l; i++){
    var group = groups[i],
        elements = group.getElementsByClassName('input'); // find all input elements  of this group (must add class to all of them)
    for (var e = 0, len = elements.length; e < len; e++){
        elements[e].setAttribute('tabindex',counter++); // set tabindex
    }
}

Демонстрация на http://jsfiddle.net/gaby/sNekS/3/

0 голосов
/ 30 ноября 2011 
<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>
0 голосов
/ 27 ноября 2011

Предполагая, что вы используете 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;
        });
    });
});

Примечание: не проверено

...