I want to be able to listen to programmatic changes to HTMLInputElement.value
Submitted by Anonymous
Permalink https://webwewant.fyi/wants/8a0ef6ac-f82a-478a-959a-7a84bacfd754/
This idea is currently being discussed.
I want to be able to react to changes to HTMLInputElement.value that are made by scripts, not just by user interaction.
Today, the input and change events fire when a user types in a field or modifies it directly, and the paste event covers clipboard operations. However, none of these fire when a script sets inputElement.value = 'new value' directly. This silent update creates a silent state inconsistency that is especially painful for:
- Float label components: These watch
:placeholder-shownto decide whether to animate the label over or out of the field. If a password manager or autofill script sets the value programmatically, the float label never re-evaluates the selector, leaving the label overlapping the filled-in content. - Third-party autofill: Libraries and browser extensions routinely set input values programmatically. Any component that reacts to field state (character counters, input validation, dependency conditions) can be left out of sync.
Ideally, setting element.value from script would trigger an event — or an observable — so that the same listener that handles user input can handle script-driven changes with no extra ceremony:
input.addEventListener('valuechange', (event) => {
updateFloatLabel(event.target.value);
});Alternatively, a MutationObserver-style API that can observe the value property (not just attributes) would satisfy the need while fitting naturally into existing patterns.
- Votes
- 0
What are votes for and how are they tallied?