HTML 5 "input" event support

What "change" means

Change means, "to a *different* value" as in, comparing the value before the user-initiated action is invoked with the value after the user-initiated action is complete to see if the values are not equal.

If normalization (like .replace(/\r\n|\r|\n/g, "\r\n") or .replace(/\r\n|\r/g, "\n") for newlines for example) is done on user input, the comparison should be made after the normalization.

Actions that MUST NOT be considered changes

Pressing DEL or BACKSPACE in an empty text field.
Replacing highlighted text with a value equal to the highlighted text.
With the text field value "dd", dragging the second 'd' to move it in front of the first 'd'.
Invoking clear or cut on an empty text field or pasting an empty string (when UI doesn't have those actions disabled in those situations).

Registering an "input" listener

You can register an "input" listener on any element, document or window object in these ways:

object.addEventListener("input", callback_function, false); (using true for the capture argument is equivalent to using false in this case)
object.oninput = callback_function;
<element oninput="js_code">

"input" listener on the window object

When you do window.addEventListener("input", function(e){}, false); for example, e.currentTarget should point to e.target.ownerDocument.defaultView and not e.target.ownerDocument.

Objects that fire the "input" event

These are the objects that support firing "input":

HTMLTextAreaElement
HTMLInputElement types of the following:
- text
- url
- search
- tel
- email
- password
- datetime
- date
- month
- week
- time
- datetime-local
- number
- range
- color
- radio
- checkbox
Any document that's in designMode
Any element that's in contentEditable mode.

The event fires at the object and bubbles all the way up to the object's window.

Here's an example of the firing:

var ev = element.ownerDocument.createEvent("Event");
ev.initEvent("input", true, false);
element.dispatchEvent(ev);

.action property

On the event object that's passed to an "input" listener's callback function, an action property is present. This property will be null except when fired from a contentEditable element or from a document in designMode where it will return a string representing the action that was invoked.

The following are the string values that are to be supported by default. Vendor-specific ones should be prefixed.

Agreed-upon list goes here

HTMLInputElement with type="checkbox"

With checkboxes, changing the value of the checkbox doesn't fire "input". Changing the checked state does instead.

HTMLInputElement with type="radio"

With radio buttons, when switching between buttons with the same @name, "input" fires with the target being the "switched to" HTMLInputElement.

"beforeinput" event

In addition to firing the "input" event, elements in contentEditable mode and documents in designMode fire "beforeinput". "beforeinput" works the same ways as "input" except "beforeinput" is cancelable so you can prevent the action.