I'm currently using the latest version of Fabric.js which is 1.4.0. Text editing is now possible using Itext object. I'd like to execute something whenever an IText object is edited. So far I have found the modified and moving events but they do not work the same way as I want them to.

canvas.on('object:modified', function(e) {
  //do something, maybe count the number of characters
});

They only work when the object is moved. Is there anyway we can execute something whenever Itext's text changes? That is... using the new feature available in 1.4.0, which is the direct text editing. Thank you very much.

I'm currently using the latest version of Fabric.js which is 1.4.0. Text editing is now possible using Itext object. I'd like to execute something whenever an IText object is edited. So far I have found the modified and moving events but they do not work the same way as I want them to.

canvas.on('object:modified', function(e) {
  //do something, maybe count the number of characters
});

They only work when the object is moved. Is there anyway we can execute something whenever Itext's text changes? That is... using the new feature available in 1.4.0, which is the direct text editing. Thank you very much.

• javascript
• web
• fabricjs

2 Answers 2

Try this for text changed events for IText changes:

canvas.on('text:changed', function(e) {
    console.log('text:changed', e.target, e);
});

Or this for IText object changes:

object.on('changed', function(e) {
    console.log('changed', object, e);
});

To anyone looking for an answer to this, adding more information to Xenyal's answer, I've found out that the latest release build of fabric.js does not support text:changed under canvas.

Using(Latest Release Build) http://cdnjs.cloudflare./ajax/libs/fabric.js/1.4.0/fabric.min.js

whatevertext.on("text:changed", function(e) {
    //this works with the latest release build where whatevertext is the name of the object
});

Using(Dev Build) https://rawgit./kangax/fabric.js/master/dist/fabric.js

canvas.on('text:changed', function(e) {
    //this will only work using the dev build
});