调整 textarea 中的字体大小以适应高度答案

【问题标题】：Resizing font size in textarea to fit height调整 textarea 中的字体大小以适应高度
【发布时间】：2012-02-09 04:32:17
【问题描述】：

我正在尝试做一些与大多数“调整大小”文本区域插件不同的事情。我不是要调整实际 textarea 的大小，而是要调整 textarea 中的字体大小，以便所有文本都适合。

我基本上想要一个文本区域的“自动”字体大小。问题在于字体需要“变小”有两种不同的方式：

用户按下“回车”并创建换行符
用户输入的文本超过了文本区域的宽度，导致其崩溃

我已经看到了一些我修改过的插件实例，它们创建了一个克隆的 textarea 或 div 具有相同的样式，您可以尝试测量新的“高度”并基于此计算字体大小，但它在 Safari 和 Chrome 中似乎总是失败，所以我猜逻辑有点缺陷。

以前有没有人做过这个或者知道做过的插件？

【问题讨论】：

如果不使用允许您准确预测文本大小的等宽字体，我从未见过成功完成此操作。一个相当大的限制。

标签： jquery

【解决方案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');
    }
});

示例

http://jsfiddle.net/XCXJb/1/

【讨论】：

如果我删除一些文本怎么办？它应该增加字体大小
嗯，你可以弄清楚。这应该使您走上正确的道路。无需对完全有效的解决方案投反对票。
其实我 +1 但认为一旦获得完整的解决方案将给出 +1 但无论如何 +1 没有完整的解决方案:)
这绝对是在正确的道路上，但减小字体大小有点困难。 ScrollHeight 仍然返回 100 的高度。是否必须为此测量字符串？如果是这样，这可能很困难。
当我投反对票时，我无法 +1，您能否更新我可以投赞成票的答案。对不起:(

【解决方案2】：

您可以将div 与contenteditable="true" 一起使用，而不是使用textarea。
此解决方案适用于删除文本并增加字体大小。

html

<div class="border" id="border">
<div class="block" id="input" contenteditable="true">Click to edit</div>
</div>

css

.block {
    width:400px;
    font-size:25px;
    font-family:'Helvetica';
}
.block:focus {
    outline: none;
}
.border {
    border: 1px solid #000;
    width:400px;
    height: 200px;
    padding: 5px;
    cursor:text;
}

jQuery

$('#border').click(function(){
    $('#input').focus();
});

$('#input').keyup(function(event){
    while ( $(this).height() > 200) {
        $(this).css('font-size', '-=1');
    }
    if (event.keyCode == 8 || event.keyCode == 46) {
        while ( $(this).height() <= 200 && $(this).css('font-size') <= "25px") {
            $(this).css('font-size', '+=1');
        }
            $(this).css('font-size', '-=1');
    }
});

示例

http://jsfiddle.net/gwyqsk0s/

【讨论】：