在 contenteditable div 上调整字体大小

Question

我希望有一个内容可编辑的 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(){
    ...
});