Updating Variable While Typing In Text Input Field

Jan 28, 2022

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!

1 Reply

Nedim Ramic

2 years ago01/28/22 at 7:47 pm (UTC)

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