Forum Discussion
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 have the user press Tab as a work around but this is not exactly how the software functions.
- GavinElliott-89Community Member
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. - CurtisStanfordCommunity Member
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.
- JillianRaeCommunity 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-89Community Member
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();
});- ZsoltOlahSuper Hero
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.
- VadimRozhanskyCommunity Member
Great solution! Exactly what I need! Thank you!
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. 🙃
- GarfieldStHi138Community Member
Hello :-)
Has a solution been found for this (outside of using a web object)?
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.