<input> text change events

javascript events text input

27,865

The HTML5 oninput event is supported by all those browsers and works very much like the onchange event, but fires as soon as the element's input changes. It also bubbles, so you can capture it further up the document tree.

element.oninput = function () {

}

Working demo: http://jsfiddle.net/Zfthe/

http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript

27,865

Author by

nornagon

Changing the world, one pipette instruction at a time.

Updated on December 01, 2020

Comments

nornagon over 3 years
Is there a library that can extract all text events from an <input type=text> (or contentEditable -- any one-line input field) element?

In particular, I need to know whenever the text is changed by:
- typing (asdf, backspace)
- cut/paste
- key combo actions (e.g. ctrl+bksp or option+bksp deletes the previous word)
- dragged & dropped text
- edit menu actions
And preferably what it was that changed (whether and what text was inserted, deleted, or replaced).

Needs to work on Chrome, Safari, Firefox 3+, IE9+.
Tim Down almost 13 years

I knew what I'd find when I saw this question in the list, and sure enough, there was your answer :)
Andy E almost 13 years

@Tim: Ha! I feel like I'm beginning to sound like a broken record :-) At least this question wasn't riddled with answers saying "use onkeyup!"...
Andy E almost 13 years

@nornagon: can't be done in a straightforward/easy manner. The event doesn't expose anything like that in a property so you'd have to store the previous value in a variable and update that variable every time the text changes, comparing the two values.
nornagon almost 13 years

I don't want to write a diff algorithm just to work out what happened :( I'm using this to interface with a Wave-like operational transform library, so the deltas are important. Would it be easier with a contentEditable element?
Andy E almost 13 years

@nornagon: nope, afraid not. If anything, it would be more difficult because you're diffing HTML rather than text.
Tim Down almost 13 years

@nornagnon, @Andy: Also, the input event is not yet generally supported on contenteditable, so the situation is even worse.
nornagon almost 13 years

i guess the only way to do it is to catch every key event and guess what it was supposed to do :/ running LCS on every keystroke quickly becomes unviable.
nornagon about 11 years

ShareJS has a neat way of finding changes in a <textarea>. Basically: it looks for the first character that's changed and the last character that's changed and assumes everything in the middle was just replaced.
ttg about 11 years

Nice find! Would that work for things like the user selecting and dragging text around in the textarea, or pasting?
nornagon about 11 years

Yep, should work for anything. It won't always find the minimal possible delta or even a very smart delta, but it will always be correct.