5

I was playing with Object.observe in the latest version of Chrome and was wondering why it does not work for the 'value' property of a text input. The code below will log a change for adding/changing the 'foo' property, but not for changing the value property. Anybody know why?

var myTextInput = document.getElementById('myTextInput');

Object.observe(myTextInput, function(changes){

  changes.forEach(function(change) {
    console.log(change);
  });

});

myTextInput.value = 'test123';
myTextInput.foo = 'bar';
Axel
  • 3,108
  • 10
  • 30
  • 49
user2054105
  • 61
  • 1
  • 1
    Maybe because DOM nodes are host objects and can basically do whatever they want (kind of). Also note that `Object.observe` is part of ES7, highly experimental and not finalized. – Felix Kling Aug 31 '14 at 19:21
  • 1
    The `.value` DOM property is implemented as a getter/setter afair, so it doesn't really change. – Bergi Sep 01 '14 at 10:29
  • @Bergi That seems like what it could be. MutationObservers also don't pick up the value property of inputs for probably the same reason. I wonder how value is stored then. – user2054105 Sep 01 '14 at 10:48

1 Answers1

-1

I'm not sure why this is, but since you're observing a DOM element's attributes, the mutation observer api may be more appropriate.

bcherny
  • 2,714
  • 1
  • 22
  • 30
  • 1
    That doesn't work on the value property either. Tried it and got nothing. Addy Osmani pointed this out as well in this article (at the bottom under "limitations"): http://addyosmani.com/blog/mutation-observers/ – user2054105 Sep 01 '14 at 10:39
  • Thanks for the link! I wasn't aware of that. – bcherny Sep 01 '14 at 20:47