在可编辑内容的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(){
    ...
});