Visualforce 開発者ガイド
jフォームの項目のタブ順序の設定
Visualforce フォームには入力項目をタブで移動する場合の「自然な順序」(左から右および上から下) が用意されています。一部のフォームでは、この順序が必ずしも最も効率が良い配置方法、あるいはアクセスしやい配置方法ではない場合があります。ページの入力コンポーネントおよびその他のコンポーネントで tabIndex および tabOrderHint 属性を使用してこのタブ順序を任意の順序に変更できます。
tabOrderHint 属性を使用してタブ順序を制御する簡単な例を次に示します。
1<apex:page standardController="Account">
2 <apex:form>
3 <apex:pageBlock title="Edit Account: {!Account.Name}">
4 <apex:pageBlockSection title="Account Details" columns="1">
5 <apex:inputField value="{!Account.Name}" tabOrderHint="4"/>
6 <apex:inputField value="{!Account.Website}" tabOrderHint="3"/>
7 <apex:inputField value="{!Account.Industry}" tabOrderHint="2"/>
8 <apex:inputField value="{!Account.AnnualRevenue}" tabOrderHint="1"/>
9 </apex:pageBlockSection>
10 </apex:pageBlock>
11 </apex:form>
12</apex:page>このページを表示して Tab キーを押すと、通常期待する順序とは逆順に有効な項目が変わります。
tabIndex および tabOrderHint の使用
表示する HTML 要素の tabindex 値に設定する値を計算するときに tabOrderHint 属性をヒントとして使用します。これを使用して、他のページコンポーネントを基準とする項目の相対的な選択順序を示します。この値は 1 ～ 3276 の整数、または評価結果がこの範囲の整数値になる式である必要があります。タブ順序は、ユーザが Tab キーを押すと選択される最初のコンポーネントであるコンポーネント 1 から始まります。
表示する HTML 要素の tabindex 値を直接設定するには、tabIndex 属性を使用します。これは、他のページコンポーネントを基準として項目の選択順序を設定する絶対的な索引です。この値は 0 ～ 32767 の整数、または評価結果がこの範囲の整数値になる式である必要があります。タブ順序は、ユーザが Tab キーを押すと選択される最初のコンポーネントであるコンポーネント 0 から始まります。
tabOrderHint 属性は <apex:inputField> コンポーネントでのみ使用できます。tabIndex 属性は次の Visualforce コンポーネントで設定できます。
- <apex:commandButton>
- <apex:commandLink>
- <apex:inputCheckbox>
- <apex:inputFile>
- <apex:inputSecret>
- <apex:inputText>
- <apex:inputTextarea>
- <apex:outputLabel>
- <apex:outputLink>
- <apex:selectCheckboxes>
- <apex:selectList>
- <apex:selectRadio>
tabIndex 属性を使用するコンポーネントと <apex:inputField> を組み合わせてタブ順序を設定する場合、tabOrderHint に 10 を掛けて、その項目の tabIndex の相当値 (概算) を得ることができます。ページのすべての要素に目的のタブ順序が設定されるように、各コンポーネントでこれを使用して相当値を手動で計算し、適切な属性を設定します。