Forum Discussion

ZsoltOlah's avatar
ZsoltOlah
Super Hero
10 years ago

Entry Text WITHOUT Losing Focus

Hi all, Is it possible to detect/trigger entry text content WHILE the user is typing? And not wait until the box loses focus?  Here's the scenario: submit button is hidden. Text entry is empty. ...
storyline 360
ClareSmith-fb7f's avatar
ClareSmith-fb7f
Community Member
5 years ago

Hi Joke, 

I found the jQuery written by Jillian quite useful and thought I would contribute by writing it in just javascript.  Here is the code:

let inputs = document.getElementsByTagName('input');

function fnBlur(e) {
    e.target.blur();
    e.target.focus();
}

for (let index = 0; index < inputs.length; ++index) {
    inputs[index].addEventListener("keyup",fnBlur)
}

  • Phil_Wingfield's avatar
    Phil_Wingfield
    Community Member
    4 months ago

    This was great, Clare! I found it worked locally for me, but the unfocus/focus cycle was confusing browser accessibility tools and breaking the script when hosted on the web. I wrote a post here with updated code, where I made it update the variable and also added a 100ms delay to give the slides time to render. I haven't had any issues with it, but make sure you match the variable in line 9, and make your trigger activate when the variable changes rather than when the text entry field loses focus!

    //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