XForms/Setting Initial Cursor

MotivationEdit

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 the first field on a form with the mouse. Although some people consider this "polish" it is the hallmark of a conscientious developer.

MethodEdit

To perform this task you must do two things. First you need to give the control you want to recieve 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 ApplicationEdit

Load XForms Application

Source CodeEdit

<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

Last modified on 28 May 2010, at 13:08