Articulate Storyline – How do you set character limit in dynamic text field using JavaScript?

This blog post guide you how to use JavaScript to limit the number of characters that can be entered in a dynamic text field in Articulate Storyline, follow these steps:

Step 1

Add the input fields on the screen. In this example, we used 3 input fields – two text entry fields and one numeric entry field.

Step 2

Click on the ‘X’ icon to open the variable dialogue box.

Step 3

In the variable dialogue box, double-click on the existing variable to change its name. Then, click “OK”.

In this example, we created three variables: “twenty_chars”, “twelve_chars”, and “fifteen_chars”, to be used in limiting the character input for the corresponding input fields.

Step 4

Create placeholder text in each input field (for example, “type text here”). Make sure that the placeholder text and the variable name are the same.

How to add JavaScript in the Trigger Wizard of Articulate Storyline?

Here’s a step-by-step guide

Step 5

In the Trigger panel, click on the trigger icon and select the dropdown list for actions.

Step 6

Select the action “Execute JavaScript”.

Step 7

Click the Script button to open JavaScript panel.

Step 8

In the JavaScript panel, paste the following JavaScript code and set the trigger to “When Timeline Starts.” Then click OK.

Note: If you want to add or delete input fields on the screen, you need to include the input variable names within the square brackets.

Example:

var fields = [“twenty_chars”, “twelve_chars”,”fifteen_chars”]

In the code, you can set maximum characters for respective input text entry field.

Examples:

$(“#twenty_chars”).attr(“maxlength”,”20″);

        $(“#twelve_chars”).attr(“maxlength”,”12″);

        $(“#fifteen_chars”).attr(“maxlength”,”15″);

var fields = [“twenty_chars”, “twelve_chars”, “fifteen_chars”];

(function setMaxChars(fields) {

    fields.forEach(function (field, field_index) {

        $(‘[placeholder=’ + field + ‘]’).attr(‘id’,field);

        $(“#twenty_chars”).attr(“maxlength”,”20″);

        $(“#twelve_chars”).attr(“maxlength”,”12″);

        $(“#fifteen_chars”).attr(“maxlength”,”15″);

        $(‘[placeholder=’ + field + ‘]’).attr(‘placeholder’, ”);

    });

})(fields);

Step 9

The “Execute JavaScript” trigger is added in the trigger layer.

Step 10

Finally, publish the file to view the output.

Note: This code doesn’t work in preview mode.

Conclusion:

In the Articulate Storyline tool, there is no default feature to set a maximum character limit for a text entry field. However, using this custom JavaScript code, you can set the maximum character limit.