7

私は多くのフィールドを持つフォームを持っており、すべての入力を与え、タブインデックス番号を選択してボタンを押しています。それはうまくいきますが、プログラムでやりたいと思います。

各列にグループがある2列のレイアウトがあるため、デフォルトのtabindexの順序は正しくありません。グループごとにトップダウンで行きたいです。含まれているdivに基づいてすべての入力、選択、ボタンタグにtabindex番号を割り当てるように、body.onload関数を作成するにはどうすればよいですか？たとえば、最初に循環させたいdivの場合、すべてのinput tabindex=1、select、およびbuttonタグにを含めることができ、2番目のdivのすべてのinput、select、およびbuttonタグにを含めることができます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

4 に答える 4

6

tabIndex を Div id で使用される数値に設定する、Mike のコードのより柔軟なバージョン。ページ構造を変更する場合も、これを変更する必要はありません。

ID を持たない、またはプレフィックス番号パターンと一致しない ID を持つ 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 でテスト済み

于 2011-11-30T10:18:51.360 に答える
3

コンテナ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/のデモ

バニラ Javascript ソリューション (要素にクラスgroupを追加し、input/select/etc 要素にクラスを追加した後)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/のデモ

于 2011-11-29T01:43:49.663 に答える
0

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

注: 未テスト

于 2011-11-27T00:58:45.643 に答える
0 
<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>
于 2011-11-30T02:34:57.827 に答える