The valueChange Event

Jump to Table of Contents

The event-valuechange module adds a "valueChange" event that fires when the value property of a text input element or textarea changes as the result of a keystroke, mouse operation, or input method editor (IME) input event.

What's the problem?

The input related events provided by browsers don't cleanly address the variety of ways users can modify an <input> or <textarea>'s value. For example, users might change an input value by

  1. typing a simple character
  2. typing a multi-stroke character
  3. using an Input Method Editor
  4. pasting a new value with ctrl+V or cmd+V
  5. pasting a new value using the paste option from a right-click context menu.

The ideal change event would fire when the value becomes something it wasn't a moment ago.

The valueChange event provides more reliable input notifications than native events like oninput and textInput, particularly with changes that result from multiple-keystroke IME input.

commentTextarea.on('valueChange', updateLivePreview);

How it works

valueChange subscriptions monitor the input's value using a variety of mechanisms including subscriptions to blur and various keyboard events, and a poll to catch the stragglers. It seems like a lot of work, but it's the only way to be sure.

The polling is only active when the input is focused, so the performance of your app should not be impacted.

Caveats

  1. valueChange does not (yet) support delegation
  2. valueChange only supports subscription on text <input>s and <textarea>s, though no steps are taken to ensure the subscribed node is one of these. If you subscribe to a different type of node, and stuff breaks, you were warned.
  3. valueChange does not capture value updates done in JavaScript unless the input is currently focused. node.set('value', 'will probably not trigger valueChange');