Limit text input on IText or Textbox - fabricjs

Question

I'm trying to create a text input on top of a fabric canvas using either IText or Textbox objects. This seems to be accomplished pretty well on http://impretty.me, which is using Fabric, but I can't seem to replicate what they're doing here. I'd either like to be able to set a max width/max character count on IText or limit the Textbox object to a single line.
My issue is that setting a width on IText is ineffective, and even though the width parameter works on Textbox, I need to keep the text to a single line. Scaling text, as is seen on http://impretty.me would be nice but isn't necessary. Any help would be greatly appreciated.
Code for the text box and the interaction I've worked out at this point is below.
const text = new fabric.IText('Type Your Message', {
originY: 'center',
hoverCursor: 'text',
left: 210,
top: 825,
width: 300,
fontFamily: 'Permanent Marker',
fontSize: 50,
hasBorders: false,
hasControls: false,
lockMovementX: true,
lockMovementY: true,
id: 'text'
})
canvas.add(text)
text.on('changed', function (options) {
if (this.width >= 635) {
const newText = this.text.slice(0, -1)
this.text = newText
this.hiddenTextarea.value = newText
console.log(this)
}
})

Answer 1

you can resize down the text to fit inside the bounding box
sizeDownTextNew = function(canvasObj, limit_height, limit_width )
{
if(typeof (canvasObj) == "undefined" || canvasObj == null)
return;
var counter = 250; //Maximum of 250iterations to size down
var initial_height = limit_height;
var max = canvasObj.get('fontSize');
var min = 6; //This is our minimum size
var foundmin=0; //Flag if minimum is met
var ratio = max;
//Now reduce the size of actual text font size property
while(canvasObj.height+2<canvasObj._getTextHeight()) //While the height of text is larger then actual text, try reducing the lineHeight
{
var fontSize = parseFloat(canvasObj.get('fontSize'));
fontSize=fontSize - fontSize/max; //reduce the size with a set ratio
if(fontSize > min) //If main font is greater then min font, we will now reduce
{
canvasObj.set('fontSize', fontSize);
canvasObj.height = initial_height
canvasObj.canvas.renderAll();
canvasObj.height = initial_height;
canvasObj.setCoords();
canvasObj.canvas.renderAll();
if(counter == 0) //Failsafe to exit the while loop if no condition is met
break;
}
counter = 300;
while(limit_width<canvasObj._getTextWidth()) //While the width of text is larger then actual text, try reducing it
{
var fontSize = parseFloat(canvasObj.get('fontSize'));
fontSize=fontSize - fontSize/ratio; //reduce the size with a set ratio
canvasObj.setCoords();
canvasObj.canvas.renderAll();
}
else
{
break;
}
canvasObj.width = limit_width;
counter -- ;
if(counter == 0)
{
break;
}
}
}
and then call this function like
text.on('changed', function (options) {
sizeDownTextNew(this,500,60);
})

Answer 2

you can add 'maxLength' to textarea.
this.on("editing:entered", () => {
if (this.hiddenTextarea) {
// limit textarea length
this.hiddenTextarea.maxLength = 40;
}
});

Answer 3

To limit text for fabric js Version 2+,
We need to override the onInput function as follows
onInput: function(e) {
if(this.width > this.maxWidth) {
return;
}
if(this._textLines.length > this.maxLines) {
return;
}
// Call parent class method
this.callSuper('onInput', e);
}
Note: maxWidth - to limit width
and maxLines - to limit height / lines in text box.
Edit: Fixed Syntax.