function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
BroncoBoyBroncoBoy 

Setting Tab Order on a VF Page

I have a section on a VF page that has a tab order set using two attributes: a) taborderhint on the inputFields and b) tabindex on a commandButton - with the desired effect of tabbing through the form fields and tabbing lastly to the button. 

I have set taborderhint="49" on the last field and tabindex="50" on the commandButton - so the last field should tab next to the button.  However the error I'm having is that instead of tabbing next to the button, it tabs to the page-header where the salesforce logo is and in the header, a link appears that reads "skip to main content".  Is there a solution to this so that I can tab from the last field to the button?  Also, is this appearance of text in the header that reads "skip to main content" - is that a bug? It certainly creates a confusing user experience.  FYI the button and the fields are within the same form component/tag.  Thanks in advance!

CODE:

<apex:outputPanel id="evtEntry">
            <apex:pageBlock title="New Event Entry" rendered="{!if(evtSelCB==true,true,false)}" tabStyle="Event">
                <apex:pageBlockSection columns="2">
                    <apex:inputField taborderhint="38" value="{!evtObject.Subject}"/>                   
                    <apex:inputField taborderhint="44" value="{!evtObject.WhoId}"/>
                    <apex:inputField taborderhint="39" value="{!evtObject.ActivityDateTime}"/>
                    <apex:inputField taborderhint="45" value="{!evtObject.WhatId}"/>
                    <apex:inputField taborderhint="40" value="{!evtObject.DurationInMinutes}"/>
                    <apex:inputField taborderhint="46" value="{!evtObject.Cost__c}"/>
                    <apex:inputField taborderhint="41" value="{!evtObject.OwnerId}"/>
                    <apex:inputField taborderhint="47" value="{!evtObject.Location}"/>
                    <apex:inputField taborderhint="42" value="{!evtObject.Event_Status__c}"/>
                    <apex:inputField taborderhint="48" value="{!evtObject.No_of_Attendees__c}"/>
                    <apex:inputField taborderhint="43" value="{!evtObject.isAllDayEvent}"/>
                    <apex:inputField taborderhint="49" value="{!evtObject.Description}" style="width: 360px; height: 50px"/>
                </apex:pageBlockSection>
            </apex:pageBlock>
        </apex:outputPanel>
       
        <!-- Bottom Save button -->
        <center>
            <apex:outputPanel id="outBottom">
                <apex:actionStatus id="myObjStatusBottom">
                    <apex:facet name="start">
                        <apex:image id="statusIconBottom" value="/servlet/servlet.ImageServer?oid=00D3000000007Jn&id=01550000000dc1c" width="30" height="30"/>
                    </apex:facet>
                    <apex:facet name="stop">
                        <apex:commandButton tabindex="50" action="{!createSelObjs}" value="Save Task/Opp/Event and Close" status="myObjStatusBottom" title="Click to save the selected records."/>                                                                  
                    </apex:facet>
                </apex:actionStatus>
            </apex:outputPanel>
        </center>
Best Answer chosen by BroncoBoy
BroncoBoyBroncoBoy
Was able to find a work around.  You can acheive this and avoid the bugs in the tabindex annd taborderhint attributes.  Here's how:  

1)  Remove the tabindex annd taborderhint attributes.
2)  Just form columns using apex:pageBlockSection & put your fileds in each column as you desire.  

By default, the tabbing will move down the first column, then the second (and so forth) and finally down to the button.  Worked great for me, hopefully someone else can use this.   Example

<apex:outputPanel id="taskEntry">
            <apex:pageBlock title="New Task Entry" rendered="{!if(taskSelCB==true,true,false)}" tabStyle="Task" >              
                 <apex:pageBlockSection columns="2">
                    <apex:pageBlockSection columns="1">

                     <apex:inputField value="{!taskObject.Subject}"/>
                     <apex:inputField value="{!taskObject.Status}"/>
                     <apex:inputField value="{!taskObject.ActivityDate}"/>
                     <apex:inputField value="{!taskObject.Follow_up_Date__c}"/>
                      <apex:inputField value="{!taskObject.Cost__c}"/>
                     <apex:inputField value="{!taskObject.No_of_Attendees__c}"/>
                    </apex:pageBlockSection>
                    <apex:pageBlockSection columns="1">   

                     <apex:inputField value="{!taskObject.WhoId}"/>
                     <apex:inputField value="{!taskObject.WhatId}"/>
                     <apex:inputField value="{!taskObject.OwnerId}"/>                  
                     <apex:inputField value="{!taskObject.Priority}"/>               
                     <apex:inputField value="{!taskObject.Type}"/>
                     <apex:inputField value="{!taskObject.Description}" style="width: 360px; height: 50px" />
                    </apex:pageBlockSection>
                </apex:pageBlockSection>

            </apex:pageBlock>
        </apex:outputPanel>

<apex:commandButton action="{!createSelObjs}" value="Save and Close" status="myObjStatusBottom" title="Click to save the selected records."/>

All Answers

BroncoBoyBroncoBoy
Was able to find a work around.  You can acheive this and avoid the bugs in the tabindex annd taborderhint attributes.  Here's how:  

1)  Remove the tabindex annd taborderhint attributes.
2)  Just form columns using apex:pageBlockSection & put your fileds in each column as you desire.  

By default, the tabbing will move down the first column, then the second (and so forth) and finally down to the button.  Worked great for me, hopefully someone else can use this.   Example

<apex:outputPanel id="taskEntry">
            <apex:pageBlock title="New Task Entry" rendered="{!if(taskSelCB==true,true,false)}" tabStyle="Task" >              
                 <apex:pageBlockSection columns="2">
                    <apex:pageBlockSection columns="1">

                     <apex:inputField value="{!taskObject.Subject}"/>
                     <apex:inputField value="{!taskObject.Status}"/>
                     <apex:inputField value="{!taskObject.ActivityDate}"/>
                     <apex:inputField value="{!taskObject.Follow_up_Date__c}"/>
                      <apex:inputField value="{!taskObject.Cost__c}"/>
                     <apex:inputField value="{!taskObject.No_of_Attendees__c}"/>
                    </apex:pageBlockSection>
                    <apex:pageBlockSection columns="1">   

                     <apex:inputField value="{!taskObject.WhoId}"/>
                     <apex:inputField value="{!taskObject.WhatId}"/>
                     <apex:inputField value="{!taskObject.OwnerId}"/>                  
                     <apex:inputField value="{!taskObject.Priority}"/>               
                     <apex:inputField value="{!taskObject.Type}"/>
                     <apex:inputField value="{!taskObject.Description}" style="width: 360px; height: 50px" />
                    </apex:pageBlockSection>
                </apex:pageBlockSection>

            </apex:pageBlock>
        </apex:outputPanel>

<apex:commandButton action="{!createSelObjs}" value="Save and Close" status="myObjStatusBottom" title="Click to save the selected records."/>
This was selected as the best answer
Kirill_YunussovKirill_Yunussov
Awesome idea.  The only problem is that nested pageBlockSection shifts the fields to the side a bit, making that block look different as compared to Pageblocksections without nested pageblocksections on the same page.