How do I set a character limit for text input widgets?

Jesse Rhee shared this question 4 years ago
Answered

How can I enable a character limit on my input widgets? I'd like to make password fields have a maximum of X number of characters or name fields to only accept X number of characters.

Best Answer
photo

Here's how to create a minimum character and maximum character count message for text entered in an Input Text Field.

1. Drag an Input Field and two Text widgets onto the Canvas. Label one Text Widget "Minimum characters not met" and label the other "Maximum characters met".

2. Hide the "Maximum characters met" text by selecting it on the Canvas, and then looking to the Properties palette and ticking 'Hide component'.

3. Select the Input Text Field element and create an "On Key Up" + "Show" event for the Input Field, select the "Maximum characters met" error message as the target to be shown.

4. Click on the "Else" text in the Events Dialog to create a condition for this event. In the Conditional Expression builder, drag the 'count' function into the open space in the expression. In the open space that appears, select and drag the Input Text Field. Then, drag a '>' comparator next to that. In the open space that appears, write in a number that will be the maximum characters.

3. Click on 'Else' and create an "On Key Up" + "Hide" event, and hide the "Maximum characters met" error message. There's no need to create a condition for this event.

4. Now we'll create an event to detect the minimum characters. Create another "On Key Up" + "Show" event, and show the "Minimum characters not met" error message.

5. Create a condition for this event. In the Conditional Expression builder, drag the 'count' function into the open space in the expression, and then drag the Input Text Field. Drag a '<' comparator after the Input Text Field. In the open space that appears, write in a number that will be the minimum characters.

6. Create one last event - "On Key Up" + "Hide" event to hide the "minimum characters" error. There's no need to create a condition for this event.

Comments (2)

photo
1

Hello!

You can find the answer in this topic:

Autojump for number fields

Best Regards,

photo
1

Here's how to create a minimum character and maximum character count message for text entered in an Input Text Field.

1. Drag an Input Field and two Text widgets onto the Canvas. Label one Text Widget "Minimum characters not met" and label the other "Maximum characters met".

2. Hide the "Maximum characters met" text by selecting it on the Canvas, and then looking to the Properties palette and ticking 'Hide component'.

3. Select the Input Text Field element and create an "On Key Up" + "Show" event for the Input Field, select the "Maximum characters met" error message as the target to be shown.

4. Click on the "Else" text in the Events Dialog to create a condition for this event. In the Conditional Expression builder, drag the 'count' function into the open space in the expression. In the open space that appears, select and drag the Input Text Field. Then, drag a '>' comparator next to that. In the open space that appears, write in a number that will be the maximum characters.

3. Click on 'Else' and create an "On Key Up" + "Hide" event, and hide the "Maximum characters met" error message. There's no need to create a condition for this event.

4. Now we'll create an event to detect the minimum characters. Create another "On Key Up" + "Show" event, and show the "Minimum characters not met" error message.

5. Create a condition for this event. In the Conditional Expression builder, drag the 'count' function into the open space in the expression, and then drag the Input Text Field. Drag a '<' comparator after the Input Text Field. In the open space that appears, write in a number that will be the minimum characters.

6. Create one last event - "On Key Up" + "Hide" event to hide the "minimum characters" error. There's no need to create a condition for this event.