1

Just like this other question, I want to be able to call a function when the user changes the contents of a contenteditable DIV. However, I want to support IE 7-10. IE 7 and 8 do not support the 'input' event. IE 9 in Standards mode and IE 10 support 'input', but fail to fire the 'input' event in response to cut, paste, delete (from the context menu), or text-drop operations. In addition, IE 10 on Windows 8 does not fire an 'input' event in response to a spelling correction change when the user selects a suggested spelling from the context menu.

See http://fiddle.jshell.net/2ScfA/show/

In all versions of Internet Explorer, I see 'cut' and 'paste' events when using the Cut and Paste context menu options.

In IE 9 Standards mode and IE 10, I can use DOMNodeRemoved and DOMNodeInserted to handle the changes resulting from dropping text into the contenteditable DIV or using the context menu to change the DIV's contents.

However, IE 7 and 8 do not support the DOM mutation events. If I use IE 7 or 8's Delete or Undo context menu options or drop text into the DIV, I am not seeing an event fired for those changes.

Is there an event that is fired in IE 7 and 8 when the user selects Delete or Undo from the context menu, or drops text into the DIV, and the contenteditable DIV's contents are changed?

Community
  • 1
  • 1
Daniel Trebbien
  • 38,421
  • 18
  • 121
  • 193
  • 1
    You can try with [`onselectionchange`](http://msdn.microsoft.com/en-us/library/ie/ms536968%28v=vs.85%29.aspx) in older IEs. – Teemu Jul 20 '13 at 13:58
  • You could check out google closure library: http://docs.closure-library.googlecode.com/git/index.html when you download the library and extract it you'll fiind the gmail editor under goog/demos/editor/editor.html If this one behaves the way you want it to behave then you could have a look how they implement it. Set a break point in updateFieldContents and check the stack. I suspect they use setInterval. html 5 content item editable has many many quirks so I wish you good luck – HMR Jul 20 '13 at 14:15
  • The code of interest seems to be in `goog.editor.Field.prototype.setupChangeListeners_` in goog/editor/Field.js http://docs.closure-library.googlecode.com/git/closure_goog_editor_field.js.source.html#line777 – HMR Jul 20 '13 at 14:33
  • Thanks @Teemu, selectionchange worked. If you convert your comment to an answer, I can accept it. – Daniel Trebbien Jul 20 '13 at 15:25

2 Answers2

2

onselectionchange is a very useful event in IEs. It is fired on quite similar conditions as oninput in newer browsers.

Teemu
  • 22,918
  • 7
  • 53
  • 106
  • Really? Removed in IE 10? That's a shame if so. [WebKit implemented it](https://bugs.webkit.org/show_bug.cgi?id=45712) a couple of years ago and it's a very useful event. – Tim Down Jul 21 '13 at 11:13
  • `onselectionchange` is still there in IE 10, thankfully: http://jsfiddle.net/cRczM/1/ – Tim Down Jul 21 '13 at 11:36
  • @TimDown Thanks a lot, nice it's still there : ). It looks like [I've tried](http://jsfiddle.net/xyetF/) with `addEventListener()` only, then it's not working. (Also the linked documentation is under "`Legacy Events`"). – Teemu Jul 21 '13 at 11:43
  • Your linked jsFiddle that uses `addEventListener()` works for me in IE 10. Re. the MSDN docs, I think that's just where they put events that are not part of a standard, which unfortunately is the case for `selectionchange`. I did suggest standardising it to WHATWG once but nothing came of it. – Tim Down Jul 21 '13 at 13:59
  • @TimDown Looks like I've tumbled with this, working in IE10 for me too : ). – Teemu Jul 21 '13 at 14:06
1

You can also change the event name from "input" to "textinput" and it will work in IE, I did this for a support request fix in our social platform a while back if that helps. Content Editable and IE don't play nice sadly.

Lux.Capacitor
  • 336
  • 3
  • 12