调整textarea中的字体大小以适合高度

Question

我正在尝试做一些不同于大多数'resize'textarea插件的事情.我不是要尝试调整实际的textarea,而是调整textarea中的字体大小,以便所有文本都适合.

我基本上想要一个textarea的'自动'字体大小.问题在于字体需要两种不同的方式才能变得"更小":

我已经看过一些我修改过的插件实例,它创建了一个克隆的textarea或div,它们具有相同的样式,你可以尝试测量新的'height'并根据它来计算字体大小,但它似乎总是Safari和Chrome都失败了,所以我猜这个逻辑有点瑕疵.

有没有人在此之前做过这个或者知道插件已经完成了？

Answer 1

尝试这应该工作,但我不确定性能如何:

HTML

<textarea></textarea>

CSS

textarea {
    height: 100px;
    width: 200px;
    resize: none;
    font-size: 18px;
    overflow-y: hidden;
}

jQuery的

$('textarea').keypress(function(){
    if ( $(this).get(0).scrollHeight > $(this).height() ) {
        $(this).css('font-size', '-=1');
    }
});

例