web-dev-qa-db-ja.com

JavaScriptでtabindexを動的に設定できますか？

Tab-indexのような属性はありますか？

コンテキスト：特定のセクションが表示されているときに手動でタブインデックスを設定する条件に応じて、Webフォームのセクションを表示または非表示にします。

javascripthtmlaccessibility
37
RVK
document.getElementById("link3").tabIndex = 6;
62
hunter

JQueryを使用すると、タブインデックスを簡単に動的に設定できます。このコードを試してください-tabindexを設定し、変数をインクリメントします

$(function() {
    var tabindex = 1;
    $('input,select').each(function() {
        if (this.type != "hidden") {
            var $input = $(this);
            $input.attr("tabindex", tabindex);
            tabindex++;
        }
    });
});
7
Nikz

HTML要素のtabIndexを動的に作成およびリセットします。

Tabindex属性は、「li」、「a」、e.t.cのセットなど、HTML要素のタブ順序を指定します。 tabindex属性は、すべての主要なブラウザーでサポートされています。

この場合、リストアイテム「li」のtabindexを設定します。通常、tabindexは「0」から始まりますが、「1」から始まるようにリセットできます。これを行うためにJqueryを使用しています。

ここでの作業を参照

<ul id="dfruits">
<li>Apple</li>
<li>Dragonfruit</li>
<li>Damson</li>
<li>Cloudberry</li>
<li>Blueberry</li>
<li>Cherry</li>
<li>Blackcurrant</li> 
<li>Coconut</li>
<li>Avocado</li>   
 <li>Pinaple</li>     
</ul>

$(document).ready(function() {

var 
SomeFruitsList=$("ul#dfruits li"),
//set tab index to starts from 1
tabindex = 0;   

SomeFruitsList.each(function() {
 // add tab index number to each list items
  tabindex++; 
$(this).attr("tabindex","TabIndex  " +tabindex); 

var tabIndex = $(this).attr("tabindex");
 // add tab index number to each list items as their title   
$(this).attr("title",tabIndex);

    $(this).append('<br/><em>My tabIndex is number:    '+tabIndex+'<em>')
})
    });
1
ShapCyber