在contenteditable div上调整字体大小

Question

我试图拥有一个contenteditable div，当用户输入文本时，该div会自动调整其字体大小。
我设法得到想要的结果（请参阅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"});  
    }
});

在图形渲染之后，在“ KeyUp”事件期间更新字体大小时，我会有一些难看的效果（当按住一个键时，出现换行符并消失...）

我正在寻找一种在视觉渲染之前计算并应用适当字体大小的方法，有什么主意吗？

提前致谢。

Answer 1

为了避免由于检查时间错误而造成的闪烁效果，您可以尝试“监听”元素的DOM更改。

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