Forum Discussion

PaulDeHorn's avatar
PaulDeHorn
Community Member
8 years ago

Change Text Entry Variable without control losing focus?

Does anyone know of a way to change a text entry variable without control losing focus first? I'm simulating software behavior where as soon as a number is typed a description appears. Currently, I ...
storyline 360
JillianRae's avatar
JillianRae
Community Member

I thought I'd put this here in case anybody finds it useful. This problem was driving me crazy and I didn't like any of the suggested solutions. I solved it using jQuery because I'm still using Storyline 3, but I'm sure you could achieve the same thing in a slightly more long-winded way with straight javascript.

I created an Execute JavaScript trigger to run at timeline start:

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

Basically it causes the active input element to lose focus very briefly after every keystroke, thereby activating the "control loses focus" trigger, to which you can attach any action you like on a case-by-case basis. In theory the split second loss of focus could cause problems but in practice I have yet to experience any.

Because it works on any unspecified input element you can also put it inside your Slide Master to apply to every slide.

GavinElliott-89's avatar
GavinElliott-89
Community Member
5 years ago

Jillian, you are a life saver. This was also driving me crazy until I came across your post. Thank you so much.

The jQuery didn't work for me for some reason, so I used standard JavaScript. It's below if anyone else needs it.

The '.acc-textinput' is the class name of the text input box in the Storyline module. I'm assuming this is always the same, but if Articulate ever change the name in the future this code won't work.

document.querySelector('.acc-textinput').addEventListener('keyup', () => {
    document.querySelector('.acc-textinput').blur();
    document.querySelector('.acc-textinput').focus();
});
  • PhilMayor's avatar
    PhilMayor
    Super Hero
    5 years ago

    jquery is no longer part of a storyline pacjkage so you have to remember to load it first

  • ZsoltOlah's avatar
    ZsoltOlah
    Super Hero
    3 years ago

    This is neat for just handling the focus. The only thing I would add to double check is accessibility. Normally, a screen reader announces the text input's label when it gets the focus along with the content. Since the code makes the input text field lose focus and then regain focus with each key, make sure the screen reader doesn't automatically reannounce the field. 

  • dougofakkad's avatar
    dougofakkad
    Community Member
    2 months ago

    Hello,

    On the offchance anyone in this thread is still following, I can't get any of the examples in this thread to work in Storyline 3.93. I was specifically trying non-JQuery methods, but I don't know if something has changed in the way Storyline references objects that I'm not spotting. I've tried the class name as detailed here and "[data-acc-text='*****']" to get the accessibility name.

Related Content