Search code examples
javascriptangularjseventsangularjs-scopecontenteditable

Angular contenteditable change event not fired


I have an issue to apply a direct change to my controller scope on execCommand.

The change event is not fired in the contenteditable directive found here and I have to blur the div to apply the changes. Is it a bug or there is something to do in addition ?

Here my jsfiddle for testing.

=== EDIT ===

The bold execCommand is working on dom but it doesn't update directly the controller scope unless an event is trigger like keyup on the field or blur.

Real time field is not update


Solution

  • The change event does not fire on all changes to the value of the DOM element. The solution is to use the input event.

      element.on('input', function() {
          scope.$evalAsync(read);
      });
    

    change

    Unlike the input event, the change event is not necessarily fired for each change to an element's value.

    --Mozilla Developer Network -- Events -- Change


    input

    The DOM input event is fired synchronously when the value of an <input> or <textarea> element is changed. Additionally, it fires on contenteditable editors when its contents are changed. In this case, the event target is the editing host element. If there are two or more elements which have contenteditable as true, "editing host" is the nearest ancestor element whose parent isn't editable.

    --Mozilla Developer Network -- Events -- Input