contenteditable change events

Question

I want to run a function when a user edits the content of a div with contenteditable attribute  What s the equivalent of an onchange event   I m using jQuery so any solutions that uses jQuery is preferred  Thanks

User · Accepted Answer

I d suggest attaching listeners to key events fired by the editable element  though you need to be aware that keydown and keypress events are fired before the content itself is changed  This won t cover every possible means of changing the content  the user can also use cut  copy and paste from the Edit or context browser menus  so you may want to handle the cut copy and paste events too  Also  the user can drop text or other content  so there are more events there  mouseup  for example   You may want to poll the element s contents as a fallback   UPDATE 29 October 2014  The HTML5 input event is the answer in the long term  At the time of writing  it is supported for contenteditable elements in current Mozilla  from Firefox 14  and WebKit Blink browsers  but not IE   Demo    x000D   x000D  document getElementById  editor   addEventListener  input   function     x000D      console log  input event fired    x000D     false   x000D   lt div contenteditable  true  id  editor  gt Please type something in here lt  div gt  x000D   x000D   x000D    Demo  http   jsfiddle net ch6yn 2691

User · Answer

To avoid timers and  save  buttons  you may use blur event wich fires when the element loses focus  but to be sure that the element was actually changed  not just focused and defocused   its content should be compared against its last version  or use keydown event to set some  dirty  flag on this element

User · Answer

Non JQuery answer     function makeEditable elem       elem setAttribute  contenteditable    true        elem addEventListener  blur   function  evt            elem removeAttribute  contenteditable            elem removeEventListener  blur   evt target               elem focus        To use it  call on  say  a header element with id  myHeader   makeEditable document getElementById  myHeader      That element will now be editable by the user until it loses focus

User · Answer

I have modified lawwantsin  s answer like so and this works for me  I use the keyup event instead of keypress which works great          editor   on  focus   function       before     this  html       on  blur keyup paste   function        if  before      this  html        this  trigger  change               editor   on  change   function    alert  changed

User · Answer

Using DOMCharacterDataModified under MutationEvents will lead to the same  The timeout is setup to prevent sending incorrect values  e g  in Chrome I had some issues with space key   var timeoutID      contenteditable    bind  DOMCharacterDataModified   function         clearTimeout timeoutID        that     this       timeoutID   setTimeout function              that trigger  change          50          contentEditable    bind  change   function         console log   this  text          JSFIDDLE example

User · Answer

The onchange event doesn t fires when an element with the contentEditable attribute is changed  a suggested approach could be to add a button  to  save  the edition   Check this plugin which handles the issue in that way    Creating a quick and dirty jQuery contentEditable Plugin

User · Answer

non jQuery quick and dirty answer   function setChangeListener  div  listener         div addEventListener  blur   listener       div addEventListener  keyup   listener       div addEventListener  paste   listener       div addEventListener  copy   listener       div addEventListener  cut   listener       div addEventListener  delete   listener       div addEventListener  mouseup   listener       var div   document querySelector  someDiv     setChangeListener div  function event       console log event

User · Answer

Two options   1  For modern  evergreen  browsers  The  input  event would act as an alternative  change  event   https   developer mozilla org en-US docs Web Events input  document querySelector  div   addEventListener  input    e    gt           Do something with the  change -like event       or   lt div oninput  someFunc event   gt  lt  div gt    or  with jQuery      div   on  click   function e           Do something with the  change -like event       2  To account for IE11 and modern  evergreen  browsers  This watches for element changes and their contents inside the div   https   developer mozilla org en-US docs Web API MutationObserver  var div   document querySelector  div    var divMO   new window MutationObserver function e           Do something on change     divMO observe div    childList  true  subtree  true  characterData  true

User · Answer

In Angular 2    lt div contentEditable  input   type  event   gt     Value  lt  div gt      Component            export class ContentEditableComponent           type event       console log event data      lt -- The pressed key    console log event path 0  innerHTML      lt -- The content of the div

User · Answer

Based on  balupton s answer    x000D   x000D    document  on  focus     contenteditable    e   gt    x000D   const self     e target  x000D   self data  before   self html    x000D     x000D    document  on  blur     contenteditable    e   gt    x000D   const self     e target  x000D   if  self data  before       self html      x000D     self trigger  change   x000D     x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Here is the solution I ended up using and works fabulously  I use   this  text   instead because I am just using a one line div that is content editable  But you may also use  html   this way you dont have to worry about the scope of a global non-global variable and the before is actually attached to the editor div      body   delegate   editor    focus   function          this  data  before     this  html             client tasks   delegate   task text    blur   function        if   this  data  before        this  html                do your stuff here - like ajax save            alert  I promise  I have changed

User · Answer

This thread was very helpful while I was investigating the subject    I ve modified some of the code available here into a jQuery plugin so it is in a re-usable form  primarily to satisfy my needs but others may appreciate a simpler interface to jumpstart using contenteditable tags    https   gist github com 3410122  Update   Due to its increasing popularity the plugin has been adopted by Makesites org  Development will continue from here   https   github com makesites jquery-contenteditable

User · Answer

Consider using MutationObserver   These observers are designed to react to changes in the DOM  and as a performant replacement to Mutation Events   Pros    Fires when any change occurs  which is difficult to achieve by listening to key events as suggested by other answers   For example  all of these work well  drag  amp  drop  italicizing  copy cut paste through context menu  Designed with performance in mind  Simple  straightforward code   It s a lot easier to understand and debug code that listens to one event rather than code that listens to 10 events  Google has an excellent mutation summary library which makes using MutationObservers very easy    Cons    Requires a very recent version of Firefox  14 0    Chrome  18    or IE  11    New API to understand Not a lot of information available yet on best practices or case studies   Learn more    I wrote a little snippet to compare using MutationObserers to handling a variety of events   I used balupton s code since his answer has the most upvotes  Mozilla has an excellent page on the API Take a look at the MutationSummary library

User · Answer

x000D   x000D  const p   document querySelector  p   x000D  const result   document querySelector  div   x000D  const observer   new MutationObserver  mutationRecords    gt    x000D    result textContent   mutationRecords 0  target data x000D       result textContent   p textContent x000D     x000D  observer observe p    x000D    characterData  true  x000D    subtree  true  x000D     x000D   lt p contenteditable gt abc lt  p gt  x000D   lt div   gt  x000D   x000D   x000D

User · Answer

I built a jQuery plugin to do this    function             fn wysiwygEvt   function              return this each function                  var  this     this               var htmlold    this html                 this bind  blur keyup paste copy cut mouseup   function                      var htmlnew    this html                    if  htmlold     htmlnew                         this trigger  change                                                        jQuery     You can simply call     wysiwyg   wysiwygEvt     You can also remove   add events if you wish

User · Answer

Here s what worked for me      var clicked              contenteditable  true     each function                   var id     this  attr  id              this  bind  focus   function                    store the original value of element first time it gets focus             if   id in clicked                    clicked id      this  html                                           then once the user clicks on save        save   click function                for var id in clicked                   var original   clicked id                   var current         id  html                       check if value changed                 if original    current  save id current

User · Answer

Check this idea out  http   pastie org 1096892  I think it s close   HTML 5 really needs to add the change event to the spec   The only problem is that the callback function evaluates if  before      this  html    before the content is actually updated in   this  html     setTimeout don t work  and it s sad   Let me know what you think

User · Answer

A simple answer in JQuery  I just created this code and thought it will be helpful for others too      var cont          div  contenteditable true    focus function             cont   this  html                    div  contenteditable true    blur function             if    this  html    cont                 Here you can write the code to run when the content change

User · Answer

Here is a more efficient version which uses on for all contenteditables  It s based off the top answers here      body   on  focus     contenteditable    function         const  this     this        this data  before    this html        on  blur keyup paste input     contenteditable    function         const  this     this       if   this data  before        this html               this data  before    this html              this trigger  change                The project is here  https   github com balupton html5edit

[javascript] contenteditable change events

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to contenteditable