Learn how to prototype web and mobile apps

How to simulate the TAB between input fields in your web wireframe

Tab between input fields in your web wireframes with Justinmind, with the help of this tutorial. 

In forms with several input fields, users often jump between fields with the TAB key.

You can download the example below here.

Follow these steps in this tutorial to learn how to simulate that action in Justinmind:

  1. Create a new prototype and drop several text input fields into the canvas.
  2. Select the first field and go to the Events tab.
  3. Click on ‘Add event’ and select the option ‘On key up’ in the ‘Keyboard’ sub-menu in the first drop down menu.
  4. There is a field in between the two drop down menus that allows you to indicate which key triggers the event. By default, any key you press will trigger the event. We’ll change it so it responds only to the TAB key.
  5. Click the box that says ‘Any key’ icon and then press the TAB key to change the trigger.
  6. In the second drop down, select the ‘Set Focus On’ action and select the next text input field. Click OK.

Interactive wireframes: TAB between inputs

Now click on “Simulate”. The cursor jumps to the next field after you press the TAB key.

Next tutorial: Autopopulate text fields in your web wireframes