键入时动态调整文本区域中的文本大小答案

【问题标题】：Dynamically resize text in a textarea while typing键入时动态调整文本区域中的文本大小
【发布时间】：2015-07-21 17:21:43
【问题描述】：

要显示自定义字体，我想要一个文本区域，用户可以在其中使用此自定义字体键入文本。例如，当您键入一个单词时，字体大小为 150 像素，并且当您键入更多时，它应该以设置的最小值减小字体大小。删除文本应再次放大字体大小。我用一个简单的脚本试过这个，见下文，在输入一定数量的字符后将文本大小减小一定数量，但很难找到合适的比例。键入前几个单词并不能充分减小字体大小，而输入更多文本则会过多地减小字体大小。

var textarea = $('#textarea');
textarea.bind('change input', function() {
    if (this.value.length % 5 == 0) {
        textarea.animate({'font-size': '-=5px'});
    }
});

这是一个非常简单的例子来测试这是否可行，它只是减小了大小。

我见过很多 stackoverflow 问题和 js 库（如 FlowType 和 TextFill）来调整 textarea 或 div 的大小以适应文本，但我没有找到任何关于在你键入时动态调整 textarea 中文本大小的信息.

有什么建议吗？

【问题讨论】：

分享你的尝试。
你能把代码贴在这里还是在 jsFiddle/jsBin 中？
我添加了简单的文本脚本和 2 个 js 库的链接，我试图让它在 textarea 上工作，但没有成功。

标签： javascript jquery html css fonts

【解决方案1】：

试试这个脚本

$(function(){

        var textarea = $('#box');
        textarea.bind('change input', function() {
            textarea.css({'font-size':(textarea.css('font-size').replace('px','')-3)});

            });
        });

HTML

<input type="text" style="width:15px" id="box" />

【讨论】：

感谢您的解决方案，但问题是如何将文本很好地放入文本区域。更改字体大小实际上适用于我的代码示例。