CODEWITHSUNDEEP
javascriptangularjseventsangularjs-scopecontenteditable
Thomas Leduc
Thomas Leduc

Reputation: 1102

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

Upvotes: 2

Views: 3146

Answers (1)

georgeawg
georgeawg

Reputation: 48948

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

Upvotes: 3

Related Questions