© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

86% OF THE FORTUNE 100

USE AXURE RP

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

AUTO-TAB FIELDS

Automatically advance entry into the next field when the current field has been completed.

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

STEP 1: GET STARTED

In AxureTraining.rp, open the page "Auto-tab fields".


The page contains three text field widgets arranged to form a date. There is a month field and a day field, which will each accept two-digit entries, and a year field that will accept a four-digit entry. The intended contents of the fields are shown with hint text.


Select the first widget, "Month". In the Properties tab, locate the field "Max Length" and type in 2 to set the maximum length entry allowed in the widget. Do the same for the "Day" widget. For the "Year" widget, set the maximum length to 4.

STEP 2: AUTOMATICALLY ADVANCE FROM DAY TO MONTH WIDGET

Select the "Month" widget. In the Properties tab, double-click "OnTextChange" to make a new OnTextChange case.


Click the "Add Condition" button at the top of the Case Editor to open the Condition Builder.


In the left-most dropdown, choose "length of widget value". Leave the next three set to their default values: "this widget", "equals", and "value".


In the right-most field, enter "2".


Click "OK" to close the Condition builder.


In the left column of the Case Editor, choose the action "Focus".


In the right column, click the checkbox for "Day".


Click "OK" to close the dialog.

STEP 3: AUTOMATICALLY ADVANCE FROM MONTH TO YEAR WIDGET

Repeat the steps above with the “Day” widget. Make sure to target the “Year” widget with the “Focus” action.

STEP 4: PREVIEW

Click Preview.


Type two digits in the "Month" field, then automatically advance to the "Day" field. Type two digits there and automatically advance to the "Year" field.

MORE RESOURCES

BIRTH DATE

/

/

TRY IT!

CORE TRAINING

TUTORIALS