Changing the default value of an Input Text Field
With Justinmind, you can create simple interactions to change the value of text based on user input.
How to change default value text
Follow the steps below to create an Event to edit the value of text when it is clicked.
- Create a new mobile prototype and drag a Dynamic Panel onto the canvas. Right click on it and select ‘Edit content’.
- Then, drag a Text widget inside the panel and add some text. In our example we wrote ‘Click to edit this text’ inside the Text widget.
- Select the Dynamic Panel and create a new Panel by clicking on the ‘+’ icon.
- Insert an Input Text Field widget and a Button widget in the new panel.
- Select the Button you placed in the second panel and click on “Add Event” in the Events palette.
- Add an “On tap” + “Set active panel” event and select the first panel. You can select the first panel by clicking it on the canvas, or in the Outline. Click OK.
- The event you just created is now displayed in the Events palette.
- Click the gear icon next to the word “Do” in the Events palette and click on “Add action”.
Now choose an “On tap” + “Set Value” event, and select the Text element in the first panel of the Dynamic Panel.
At the bottom of the Events dialog, select the option “Calculated” displayed next to “Value is…” and then select “Add expression”.
- The Expression builder will appear. Using the Outline, select the second panel of the Dynamic Panel and drag the Input Text Field element to the open area of the value expression.
- Click OK twice. The event you have created will transfer the text entered into the Input Text Field back to the Text element on the first panel, and will set the first panel as active again.
- Now select the Text element in the first panel, go to the Events palette and click “Add event”
- In the events dialog, add an “On tap” + “Set active panel” event, and select the second panel as the destination. Click OK to finish building the event.
That’s it! Click “Simulate”, tap on the Text element and enter text into the Input Text Field. The text you entered will be shown in the Text element.