Input:changed and form:changed

I think it would be great if there would be the CSS pseudo classes input:changed and form:changed.

Use case: I have a form which contains several inputs. It is a “traditional” form with a submit button.

For better UX the submit button should get highlighted if a input has changed.

Solutions like this create a lot of load at the client:

function initChangeDetection(form) {
  Array.from(form).forEach(el => el.dataset.origValue = el.value);
}
function formHasChanges(form) {
  return Array.from(form).some(el => 'origValue' in el.dataset && el.dataset.origValue !== el.value);
}

Source: https://stackoverflow.com/a/52593167/633961

This would be easily possible with CSS only if form:changed would exist.

What can I do to make this dream come true?

1 Like