javascript - How do you get a mutation observer to detect a value change of a textarea? - Stack Overflow

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?

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?

• javascript
• mutation-observers

Share Improve this question Follow asked Aug 21, 2012 at 4:58 bmillarebmillare 4,23322 gold badges2626 silver badges4242 bronze badges 1

• possible duplicate of Detect when text is entered into the textarea and change it correspondingly – Paul Sweatte Commented Aug 15, 2014 at 0:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.)

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.