Focus

The Focus component is a non-visual component that controls focus on the page. By using it, you can specify what component should be focused on page load and also save focus between page submissions. Note that there can be only one Focus component on the page.

API Reference | Tag Reference

Specifying Focus Component

To add the Focus component to the page, use the <o:focus> tag. When this component is added, focus is saved automatically. It is important that all HTML and JSF tags have their ids specified to store focus between submissions by using the Focus component.

The Focus component has a boolean autoSaveFocus attribute. By default, it is set to "true", which means that focus is saved between page submissions.

<h:form>
  <o:focus autoSaveFocus="true"/>
</h:form>

Specifying Focused Component on Page Load

You can specify what component should be focused when the page is loaded using the focusedComponentId attribute. In this attribute, you should specify the id of the component to be focused. Note that the Focus component tracks input focus not just for JSF components but for any HTML input elements as well, so as an alternative you can specify id of an HTML element in the focusedComponentId attribute. It is possible to declare the focusedComponentId attribute as a value expression for loading/saving the focused component through a backing bean.

The focusedComponentId attribute should be defined in the same way as the for property of the standard HTMLOutputLabel component, and as an addition allows referring HTML elements:

  • The first way of specifying this attribute is for referencing JSF components and it is similar to the way of specifying the for attribute of the standard <h:outputLabel> and <h:message> tags. It can either be an "absolute" identifier that begins with a colon and includes ids of all naming container parents, such as ":form:button1", or it can be a relative identifier that refers to another child in the same naming container, for example "button2". The formal rules of finding the component by identifier are described in API reference for the UIComponent.findComponent() method. Here's an example:
    <h:form id="form1">
      <o:focus focusedComponentId="input1"/>
      ...
      <h:inputText id="input1"/>
    </h:form>
  • The second way of specifying this attribute is for referring HTML elements rather than JSF components. Referring to HTML elements is similar to referring JSF components with an absolute identifier – you just need to prepend actual element id with a colon symbol. For example in order to refer a an HTML button tag declared as <input id="myHtmlButton" type="button" value="Test"/> you should use the ":myHtmlButton" value of the for attribute. Here's an example:
<h:form id="form1">
  <o:focus focusedComponentId=":input"/>
  ...
  <input id="input" type="text"/>
</h:form>

If the autoSaveFocus attribute is set to "true", the id of the focused component is saved into the focusedComponentId attribute between page submissions.

Tracking Focus For the Entire Application

You can also specify the org.openfaces.autoSaveFocus context attribute in web.xml to "true" (the default is "false"). This attribute causes focus to be saved between form submissions for all application pages.

<context-param>
  <param-name>org.openfaces.autoSaveFocus</param-name>
  <param-value>true</param-value>
</context-param>
OpenFaces