Adapt font size on a contenteditable div

Question

I seek to have a contenteditable div which adapts its font-size automatically when user enters text.
I manage to get the result I want (see jsfiddle )

$("#TextIn").on("keyup",function(event)  
{  
    $("#TextIn").css({"font-size":"200px"});  
    while($("#TextIn").innerHeight() >= $("#NoteWrapper").innerHeight())  
    {  
        $("#TextIn").css({"font-size":parseInt($("#TextIn").css("font-size"))-1 + "px"});  
    }
});

As the font size is updated during the "KeyUp" event AFTER the graphical rendering I have some ugly effects (when maintaining a key pressed, line break appearing and disappearing...)

I'm looking for a way to calculate and apply the proper font-size before the visual rendering, any idea?

Thanks in advance.

Answer 1

To avoid flickering effects due to misstimed checking, you could try 'listening' to DOM changes to your element.

$("body").on('DOMSubtreeModified', "#TextIn", function(){
    ...
});