9

I have seen mutation observers used to obtain the properties of doms when they are modified such as with the google chrome developer tools. I can't, however, find how to call a function when the text within a textarea changes due to a user typing or pasting. In my code, as the user types the callbacks don't get called, even with all the observe options set to true. What is the code for this?

bmillare
  • 4,183
  • 2
  • 23
  • 42
  • possible duplicate of [Detect when text is entered into the textarea and change it correspondingly](http://stackoverflow.com/questions/19179585/detect-when-text-is-entered-into-the-textarea-and-change-it-correspondingly) – Paul Sweatte Aug 15 '14 at 00:45

2 Answers2

11

The mutation observers listen for changes of the DOM. The current state of form elements, however, is not reflected by the DOM.

For example, create an input element input without setting the value attribute. When text is being entered into the input field, input.value reflects this text. On the other hand, input.getAttribute('value') still returns null.

Therefore, the mutation observers can't observe this change in the form field's status.

(Object.observe of the proposed ECMAScript 6th edition also doesn't help. Although one can listen on changes of host objects in recent versions of Chrome, changes of host object properties like value of input above are not being observed.)

Marc
  • 4,327
  • 4
  • 30
  • 46
0

See this link Textarea onchange detection. You will need to write onkeyup and onchange function.

By the way, the answer above will not work for an input method. My solution is setInterval to detect if the text has changed every 50 ms.

Community
  • 1
  • 1
Chao Zhang
  • 1,476
  • 2
  • 14
  • 25
  • 2
    Thanks for the answer but the main point behind using mutation observers was to eliminate relying on polling to detect changes (from any cause). It sounds like you are suggesting mutation observers can't do this. – bmillare Aug 21 '12 at 14:30
  • [Another similar link](http://stackoverflow.com/questions/574941/best-way-to-track-onchange-as-you-type-in-input-type-text), I think mutation observers are not provided by some popular libraries. Anyway, I find it quite easy yet not pretty to use polling to detect changes. Otherwise, you have to consider a number of conditions. – Chao Zhang Aug 21 '12 at 14:44
  • Chao Zhang probably meant IM modifiers for Chinese and Japanese input. I am running into a similar problem with textarea not firing key* events because the IM modifier is catching them. Only the backspace, delete and Enter key bubble through. – Wouter Thielen Apr 22 '15 at 02:01
  • Just to add: my situation was a ckeditor not firing the "change" event when using Japanese input method. Apparently I had to use the "key" event instead because according to the ckeditor documentation on the "change" event: "Due to performance reasons, it is not verified if the content really changed. The editor instead watches several editing actions that usually result in changes. This event may thus in some cases be fired when no changes happen or may even get fired twice." – Wouter Thielen Apr 22 '15 at 02:18