Entry Text to automatically update the variable, similar to Lose Focus

Hey all!

I've been working on making a text entry field update a Storyline variable live when a user begins typing, and also experimented with making the field lose and regain focus after every keystroke. I found some excellent posts, such as a post by JillianRae​, that gave very helpful code which worked perfectly when run locally. However, when published and hosted on a web server, it didn’t trigger correctly.

Here is that code from JillianRae​:

$(function() {
  $("input").keyup(function() {
    $(this).blur();
    $(this).focus();
  });
});

After some sleuthing,  I discovered the error was caused by violating ARIA (Accessible Rich Internet Applications) standards. ARIA is designed to ensure web content is accessible to users with disabilities, especially those using screen readers. The near-instantaneous loss and regain of focus caused elements to be hidden from assistive technologies, which broke the script’s functionality.

To fix this, I changed two things:

1. Instead of forcing the input to lose and regain focus, I made the script update the Storyline variable after each keystroke. This approach is less likely to trigger ARIA or accessibility warnings. Just remember to update your triggers to respond to variable changes instead of the Text Entry losing focus.
2. I added a 100ms timeout delay to allow the slide to finish rendering fully, which helps avoid ARIA errors.

Put this code to be executed once the timeline starts on the slide:

//This script updates the variable when the first input is typed

setTimeout(() => { //Adds a timeout function to avoid ARIA errors
  let input = document.querySelector('input');

  function updateStorylineVar() {
    const player = GetPlayer();
    const currentValue = input.value;
    player.SetVar("UserName", currentValue); //the Storyline variable in quotes
  }

  if (input) {
    input.addEventListener('input', updateStorylineVar);
  }
}, 100)

//Timeout in ms; 100-300ms range works well

I’m using this to hide a certificate download button until the user starts typing their name and the variable updates, so they don't download it without entering their name first.

I recommend adding a fallback trigger that updates the variable when the Text Entry loses focus, just in case future updates break the live input script.