© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.
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
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.