How to capture text entry real time?

I ran into a challenge recently in Storyline: I wanted the user to type in something in a text field. At the same time, disable the submit button unless the text field has some content. In other words, I wanted to force to user to type something and execute triggers WHILE they’re typing. Not when the text box loses focus.

Something like that:

It is not supported as is in Storyline. The variable for the text entry only gets updated when you’re done typing, and click outside the box or press Tab or something. In other words, when it loses focus.

Here’s a workaround (with some caveat):

https://rabbitoreg.com/sl2/story.html

It’s using a Webobject inside Storyline just for the text entry. Not the most efficient way but it does the job. Not only you can control the entry real time, but you can even count characters if you wanted to. Let’s say you want the user to type at least 100 characters. Preferable something that makes sense 🙂

Do you like my examples? Consider supporting my kickstarter project!

[thrive_fill_counter color=”blue” value=”90″ before=”” after=”%” percentage=”90″ label=””]

Download the sources here. 

And the caveat:

The webobject inside the Storyline points to a demo.html file. That’s the file with the text entry. In the source zip, you’ll find another zip called input.zip.
1) Upload the input.zip to a webserver in a folder.
2) Extract the zip in the folder.
3) In this Storyline file, edit the webobject to point to the new demo.html you just uploaded.
4) Publish the Storyline file.
5) Open the /story_content/user.js file and paste the following code at the bottom:

function typing(textme)
{

var p = GetPlayer();
p.SetVar(“test”,textme);
}
6) Upload your published Storyline output to the same webserver (same domain) as the input.