onInput Event

Coding HTML forms has been painful my entire career. Form controls look different between operating systems and browsers, coding client side and server side validation is a nightmare, and inevitably you forget something somewhere along the line. Some behaviors don’t act the way you’d hope, like onChange, which only fires when the user leaves (blurs) […]

The post onInput Event appeared first on David Walsh Blog.

Coding HTML forms has been painful my entire career. Form controls look different between operating systems and browsers, coding client side and server side validation is a nightmare, and inevitably you forget something somewhere along the line. Some behaviors don’t act the way you’d hope, like onChange, which only fires when the user leaves (blurs) a given form controls. Enter the onInputevent, which changes upon keystroke, paste, etc.

// Try it here:  https://codepen.io/darkwing/pen/KKmBNvg
myInput.addEventListener('input', e => {
  console.log(e.target.value);
});

These days it seems like the old onChange behavior isn’t useful — we always want to react to any user input. onInput also fires on elements with contenteditable and designmode attributes. Most modern JavaScript libraries like React treat onChange like onInput, so it’s as though onChange has lost its use!

The post onInput Event appeared first on David Walsh Blog.


Print Share Comment Cite Upload Translate
APA
David Walsh | Sciencx (2024-03-29T06:28:39+00:00) » onInput Event. Retrieved from https://www.scien.cx/2021/08/03/oninput-event/.
MLA
" » onInput Event." David Walsh | Sciencx - Tuesday August 3, 2021, https://www.scien.cx/2021/08/03/oninput-event/
HARVARD
David Walsh | Sciencx Tuesday August 3, 2021 » onInput Event., viewed 2024-03-29T06:28:39+00:00,<https://www.scien.cx/2021/08/03/oninput-event/>
VANCOUVER
David Walsh | Sciencx - » onInput Event. [Internet]. [Accessed 2024-03-29T06:28:39+00:00]. Available from: https://www.scien.cx/2021/08/03/oninput-event/
CHICAGO
" » onInput Event." David Walsh | Sciencx - Accessed 2024-03-29T06:28:39+00:00. https://www.scien.cx/2021/08/03/oninput-event/
IEEE
" » onInput Event." David Walsh | Sciencx [Online]. Available: https://www.scien.cx/2021/08/03/oninput-event/. [Accessed: 2024-03-29T06:28:39+00:00]
rf:citation
» onInput Event | David Walsh | Sciencx | https://www.scien.cx/2021/08/03/oninput-event/ | 2024-03-29T06:28:39+00:00
https://github.com/addpipe/simple-recorderjs-demo