Capturing the Enter Key in Application Pages

On most normal web pages, pressing the Enter key either has no effect or causes the browser to 'click' one of the buttons in the page, but the button clicked is often not the one that users would think is the 'correct' button.

Some pages contain special tags that define 'capture zones' for the Enter key.  Each capture zone is associated with a specific button, and this button will be 'clicked' when the capture zone is activated.  A capture zone is activated when it detects that the Enter key is pressed inside of it.  The location of the key press is determined based upon which page element was highlighted (or last clicked) when the key was pressed.  The one exception to this rule is that elements that normally respond to the Enter key directly do not activate capture zones if they are the source of the key press.  The elements that do not activate capture zones are:

When capture zones are nested, only the innermost zone is activated.

These page template files contain the following capture zones:

The capture zone tags are .NET script tags that are ignored by Iron Speed Designer itself.  At run-time, these tags call code in the application classes to create the DHTML for the capture zones.  Iron Speed Designer provides you with a capability to handle the pressing of the Enter key by the application user on any control or the entire page.  You can designate the specific button that will receive an event when the enter key is pressed for a control.  This control is provided by enclosing the control with a Begin Capture and End Capture block as shown in the example below for the Table Report page's Search text box and the capture zone around it from the Everest page style:

<%= Me.SystemUtils.GenerateEnterKeyCaptureBeginTag(Me.FindControl("SearchButton")) %>

          <GEN:SearchFilter name="SearchArea" />

<%= Me.SystemUtils.GenerateEnterKeyCaptureEndTag(Me.FindControl("SearchButton")) %></td>

     <td><GEN:Button name="SearchButton" /></td>

In the above example, the SearchFilter code generation tag results in a text box for the application user to enter search text.  To begin the search process, the application user can press the search button using a mouse.  Alternatively, the application user can simply press Enter.  To let applications pass the Enter Key event, you can surround the search filter text box within a Begin and End capture block.

You can specify the control that will receive the event when the enter key is pressed as a parameter to the function.  In the example below, the Me.FindControl function is first used to find the search button on this page.  The Button code generation tag defines a button with the name of SearchButton.  The begin capture function GenerateEnterKeyCaptureBeginTag can be called to designate the beginning of the capture block.

<%= Me.SystemUtils.GenerateEnterKeyCaptureBeginTag(Me.FindControl("SearchButton")) %>

To end the capture block, call the GenerateEnterKeyCaptureEndTag function using very similar syntax shown above.

<%= Me.SystemUtils.GenerateEnterKeyCaptureEndTag(Me.FindControl("SearchButton")) %>

Note that the SearchButton referred to by the capture block must exist within the same page, but is not required to be within the capture block.

Note also in certain instances it may be more appropriate to use FindControlRecursively() instead of FindControl().

Clicking ‘Enter’ displays the wrong page

You will find ‘Enter’ key capture zones in pages built with Iron Speed Designer:

<%= SystemUtils.GenerateEnterKeyCaptureBeginTag(FindControl("OrdersTable:OrdersSearchButton")) %>


<%= SystemUtils.GenerateEnterKeyCaptureEndTag(FindControl("OrdersTable:OrdersSearchButton")) %>

(OrdersTable:OrdersSearchButton is a control used for illustration in this example.)

Anything that appears between these two lines is the ‘Enter’ key capture area.  If you press ‘Enter’ key in the area defined between these two tags then it is equivalent to clicking the OrdersSearchButton in this case.

You can change the ‘Enter’ key handling by moving the capture zones elsewhere in your page or eliminate them altogether if you don’t want any ‘Enter’ key handling.

See Also

Customizing Web Page Behavior

Using Client-Side JavaScript in Application Pages

Capturing the Enter Key in Application Pages

Setting Focus in Application Pages

Configuring Modal Pop-up Pages