XForms/Setting Initial Cursor

Motivation

When a form loads you want to set the initial cursor position so the user's first keystrokes are entered into the first field. This prevents the user from having to select the first field on a form with the mouse. Although some people consider this "polish" it is the hallmark of a conscientious developer.

Method

To perform this task you must do two things. First you need to give the control you want to receive the first keystroke event an id attribute. For example:

<xf:input id="first-field">
   <xf:label>Search</xf:label>
</xf:input>

The next step is to use the xforms-ready event to set the focus to this field using the setfocus element.

These initial actions are usually placed at the end of the model in the html header but before the body.

<xf:model>
   ...
   <xf:action ev:event="xforms-ready">
      <xf:setfocus control="first-field" />
   </xf:action>
   ...
</xf:model>

Link to XForms Application

Load XForms Application

Source Code

<html
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:xf="http://www.w3.org/2002/xforms" 
   xmlns:xs="http://www.w3.org/2001/XMLSchema"
   xmlns:ev="http://www.w3.org/2001/xml-events" >
   <head>
      <title>Initial Cursor Positioning</title>
      <xf:model>
          <xf:instance xmlns="">
              <data>
                  <element1/>
              </data>
          </xf:instance>

      <xf:action ev:event="xforms-ready">
         <xf:setfocus control="first-field" />
      </xf:action>
      </xf:model>
   </head>
   <body>
      <h3>Initial Cursor Positioning</h3>
      <xf:input ref="element1" id="first-field">
         <xf:label>Element One:</xf:label>
      </xf:input>
   </body>
</html>

Next Page: Selection and Deselection Events | Previous Page: Events Overview
Home: XForms