Forum Discussion

CurtisStanford's avatar
CurtisStanford
Community Member
3 years ago

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!

storyline 360
  • Nedim's avatar
    Nedim
    Community Member
    3 years ago

    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");
    });
    });

      • Nedim's avatar
        Nedim
        Community Member
        15 days ago

        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)
Related Content