Forum Discussion
Updating Variable While Typing In Text Input Field
Somebody once shared this JS as a solution, which works well for a single text field on the screen. But it only seems to focus on the first text field if there are multiple. Is there a way to have all text fields update their variables while typing in them?
document.querySelector('.acc-textinput').addEventListener('keyup', () => {
document.querySelector('.acc-textinput').blur();
document.querySelector('.acc-textinput').focus();
});
I'm trying to make it so that a button isn't available unless the text fields have been filled out. As a matter of intuitive UI, it doesn't make sense to have the learner have to click out of the text field first for the button to become available.
Thanks!
10 Replies
Hi Curtis,
For more text fields, you should probably use "querySelectorAll" along with "forEach" method.
For example:const textFields = document.querySelectorAll('.acc-textinput');
textFields.forEach((textField) => {
textField.addEventListener('keyup', () => {
textField.blur();
textField.focus();
console.log("Worked for me");
});
});Did this stop working?
It works in the latest Storyline version v3.94.33511.0. If you are still running one or two previous versions run this this code instead:
const Inputs = () => { const inputs = document.querySelectorAll('.acc-textinput'); inputs.forEach((input) => { input.addEventListener('keyup', () => { input.blur(); input.focus(); }); }); } setTimeout(Inputs, 100)
Hi there,
My version is 3.98.34380.0 and the code not working anymore. The input text dosen't have .acc-textinput. Any solutions?
Hello ElizabethParent,
You can also post and share your JavaScript code in the JavaScript section of our community to have more expert eyes check the code you currently have. They may be able to spot something that needs to be changed to get it to work in the recent version. You can also downgrade to an earlier version of Storyline 360 if you need to republish your course while waiting for input.
Hello JoseTansengco​
thank you. I forgot to mention that my script is on a layer. I think this could be the problem.
But I will downgrade my version.
No need to downgrade. Can you upload four slide so I can take a look and send it back to you with a script? Just let me know what you are trying to accomplish.
Sorry, I can't. It's for my job and I can't.
But it's for an exercice. The user must enter a postal code in 2 input text (I think it's the first error). I change for the textearea, but, when on a layer, the conde is not working.var monChamp1 = document.querySelector("[data-model-id='5YYnZVYGrR2']") var monInput1 = monChamp1.querySelector('input[type="text"]'); monInput1.addEventListener('input', function(event) { console.log('someone is typing in a box...'); console.log(monInput1.value) /* valeurChamp1 = monChamp1.value; player.SetVar("Saisiedetexte", valeurChamp1);*/ //cpt++ })
