How-to highlight input field content when accessed from auto-tab

A question on the OTN forum has been how to highlight the content of an input field when navigation to it occurs using the auto tab functionality. As a reminder, the "autotab" property of an input field, if set to "true", tabs out of the field that you currently edit when the maximum length of the field entry is reached.

The problem reported on OTN for JDeveloper 11.1.2.4 (and I am sure its the same on other versions of JDeveloper) is that manual tabbing into a next field will highlight the fields content (value) whereas autotab doesn't. To enforce consistent highlighting behavior, you can use JavaScript as shown in the page sample below:

<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich"><af:document title="AutoTab.jsf" id="d1"><af:resource type="javascript">
      function onFocusHandler(inputEvent){
         var textfield = 
             AdfAgent.AGENT.getElementById(inputEvent.getSource().getId()+'::content');
         textfield.select();}</af:resource><af:form id="f1"><af:panelFormLayout id="pfl1"><f:facet name="footer"/><af:inputText label="First Name" id="it1"
                           value="#{viewScope.fieldValues.firstName}"
                           maximumLength="5" autoTab="true"/><af:inputText label="Last Name" id="it2"
                           value="#{viewScope.fieldValues.lastname}"><af:clientListener method="onFocusHandler" type="focus"/></af:inputText></af:panelFormLayout></af:form></af:document></f:view>

The af:clientListener is attached to the input field for which you want to show content highlighting on autotab. Attach the same client listener definition to  all field that should have the content highlighting. Instead of adding the JavaScript to the page, you want to create an external JS library file and link it from the page as the JS code above is reusable.

Note that the use of "'::content" in the JavaScript uses knowledge about the way component IDs are rendered at runtime in ADF Faces. If component rendering changes in a future release (you never know) then your code will break at this point and needs to be corrected. So heads-up on this risk (though should be a small one). To the time of writing this lines there is no other API (option) available to get to the HTML field handle in ADF Faces.

Also note the use of AdfAgent.AGENT.getElementById, which is a performant wrapper API in ADF Faces around the document.findElementById function of the Browser DOM. As a rule of thumb you should always work with ADF Faces JS APIs and don't directly reach out to the DOM yourself.