Text entry boxes - update value without losing focus

What am I asking?

By default, a text entry box in Storyline only saves the entered value to a variable when the text entry box loses focus (so when the learner tabs out, clicks away, etc.) I am looking for a way to update the value in real-time instead.

Why am I asking?

I have a basic system simulation in Storyline. The real system has a text entry box and a 'Save' button. Save is disabled when the text entry box is empty because it's a required field. It enables the moment you type even a single character. I want to replicate that behaviour in Storyline so that the training is as close to the real thing as possible.

I have your usual "Set value variableNameHere equal to the typed value when the text entry box loses focus" and "Set state of Save to normal when the variable variableNameHere changes if variableNameHere does not equal blank, else set state of Save to disabled."

That works... the moment the text entry box loses focus, not in real-time. That makes it unlike the real system it's trying to simulate. It leads to a far less responsive experience and we have to tell the learner to add a step that they wouldn't have to perform in the real thing.

Have I tried anything?

I did find one solution that uses JavaScript to constantly toggle the focus of the text entry box. Because the text entry box was losing and regaining focus every second, that was forcibly triggering Storyline's built-in "Set value variableNameHere equal to the typed value when the text entry box loses focus."

Sadly, that solution isn't viable as it plays havoc with assistive technologies such as screen readers, voice command tools and keyboard only navigation. Whatever I do needs to remain accessible.

In summary

I can't be the first or only person to have had this problem. Please share any solutions you've found with me.

accessibility

Articulate 360

e-learning development

storyline 360

Nedim
4 days ago
There are several solutions in the community for this. Instead of forcing the focus to move, we can tell the browser to 'listen' for any input activity within the text box and manually push that value into your Storyline variable in real-time. By using an EventListener, we update the text entry variable directly without the input field ever losing focus. Check the example below:

const inputField = document.querySelector('.acc-textinput'); inputField.addEventListener('input', function() { let currentVal = inputField.value; setVar("userEntry", currentVal); }); // optional input round border inputField.style.cssText += "border-radius:50px !important; border:1px solid #fff !important;";