Change Text Entry Variable without control losing focus?

Hello Paul!

I've seen users ask this before, but not sure that I've seen a solid solution shared. I know one user ended up utilizing a web object.

Not sure if the suggestions shared in this thread may be helpful as well.

Hello :-)

Has a solution been found for this (outside of using a web object)?

Hi Garfield,

I haven't seen any other solutions for this - the text entry is waiting for the user to click outside or onto something else to confirm that they're done typing and continue on. 

It may be something that you could setup using Javascript - so I'd suggest searching ELH for examples using that, or post a new discussion specifically asking for ideas! It's well above my head, so sadly I'm not much help there. 🙃

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.

Hello! Does anyone know if there's some way to make this code work if there are multiple text input fields? If I have 4 text input fields, for example, it only seems to listen to the first one.

Hey Curtis and to anyone else who finds themselves here. 

The code below detects when anyone types into any number of text input boxes on a Storyline slide. Whenever a key is pressed the text boxes lose focus for a millisecond and trigger the relevant 'lose focus' trigger in Storyline.

The 'console.log' line can be omitted from the code. If you keep it in, a message is displayed in the browser for testing purposes.

Array.from(document.querySelectorAll('.acc-textinput')).forEach(el => {
    el.addEventListener('keyup', () => {
        console.log('someone is typing in a box...');
        el.blur();
        el.focus();
    })
});

A Storyline file is attached to demonstrate. Simply publish to HTML (web) or SCORM. 

Thanks for the help, Gavin! And for following up directly. Confirming that his solution works, for anyone else that may need it :)

Array.from(document.querySelectorAll('.acc-textinput')).forEach(el => {
    el.ariaHidden = 'true';
    el.addEventListener('keyup', () => {
        el.blur();
        el.focus();
    })
});

There may be a way to amend the code to take that into account—see above. Setting an element's attribute to 'aria-hidden="true"' should prevent screen readers from announcing anything relating to that element. 

I don't know exactly how Storyline is set up for screenreaders so the above may/may not work. It's worth a try. 

Let us know how you get on.

You can remove the tag inside storyline but that would then break the interaction for anyone using a screen reader

A lot of the stuff I sued to do I cannot now do because of accessibility, I do think accessibility should be a high priority for all courses nowadays.

You all are rock stars! I know just enough JavaScript to be dangerous, though I love the extensibility it adds to Storyline. Inspired by your code, I wanted to use the contents of the input box to simulate a search box, so I added this.

Array.from(document.querySelectorAll('.acc-textinput')).forEach(el => {
    el.addEventListener('keyup', () => {
        console.log('someone is typing in a box...');
        el.blur();
        el.focus();
    })
});
var player = GetPlayer();
var searchentry = player.GetVar("SearchEntry");
searchentry= Array[1] + Array[2] + Array[3];

player.setVar("SearchEntry",searchentry);