XForms/Setting Initial Cursor
Appearance
< XForms
Motivation
[edit | edit source]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
[edit | edit source]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
[edit | edit source]Source Code
[edit | edit source]<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>