2012-03-30 10 views
0

ページの半分が動的幅でもう一方が固定されているレイアウトのページがあります。これは固定幅の側を右に浮かべることで実現されます。それはすべてうまく表示されますが、動的な幅のマークアップの前に固定幅のマークアップがあるため、タブの順序がはずれます。浮動入力時のタブインデックス

はここを参照してください:私は入力にtabIndexプロパティを置くことに頼ることなくこれを克服するにはどうすればよいhttp://jsfiddle.net/BaMqG/

+1

1.入力を行単位または「ブロック単位」でナビゲートしますか? 2.固定グループから離れることができますか? 3. tabindexプロパティの何が問題になっていますか? – fcalderan

+0

1.左から右へ行を移動したい。固定グループは、動的グループの後に来る必要があります。 3.フォームはjavascriptを介してサイズが増え(入力量が増える)、タブのインデックスを維持することは悪夢になります。 – CeejeeB

答えて

0

テーブルを使用して作業するためのタブインデックスがない同じ見た目のフォームを得ることができました。

はこちらをご覧ください:http://jsfiddle.net/ymSGM/

それは他の方法で行うことができる場合、私はまだ興味があると思います。

+0

正直言って、あなたのレイアウトの固定幅と幅の比率は、html/cssでは本質的に問題があります。フォームの動的な性質を扱うスクリプトを作成するか、表を使用して問題を回避する必要があります。それぞれに長所と短所があります。セマンティックマークアップが余分なJavaScriptを避けるよりもこのシナリオでそれほど重要でない場合は、テーブルがおそらくあなたの持つ最良の賭けです。 –

0

jQueryを使用すると、ループおよびカウンタ変数を使用してタブインデックスを動的に設定できます。見てみな。 http://jsfiddle.net/BaMqG/22/

$(document).ready(function() { 
    var i = 1; 
    $('.wrapper').each(function(){ 
     $(this).children('.dynamic').children('input').each(function(){ 
      $(this).attr("tabindex",i); 
      i++; 
     }); 
     $(this).children('.fixed').children('input').each(function(){ 
      $(this).attr("tabindex",i); 
      i++; 
     }); 
    }); 
});​ 

私はあなたから開始したいものは何でもtabindex属性の数に設定することができますのための初期値。

+0

はい、私はこれについて考えましたが、フォームのこの部分は完全なフォームの真ん中に位置しています。したがって、jsを介して新しいフォーム行を追加すると、タブのインデックスを更新する必要があるだけでなく、これが私が非タブインデックスソリューションを希望する理由です。 – CeejeeB

+0

これには実用的な非タブインデックスソリューションはないと思いますが、私はこのjsをあなたが望むものを達成するために簡単に変更することができます。本当に、それは何に関係なくjsを取るつもりです、そして、これはおそらくそれを行うコードの重さが最も少ない方法でしょう。 –

+0

しかし、ページへのリンクを投稿すると、別の解決策を見ることができます。 –

関連する問題