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

To display a custom font I would like a textarea where users can type text with this custom font. When you type one word the font-size is for instance 150px and as you type more, it should reduce the font-size with a set minimum. Removing text should enlarge the font-size again. I've tried this with a simple script, see below, reducing text size by a certain amount after typing a certain amount of characters but it's hard to find the right ratio. Typing the first few words does not reduce the font-size enough and with more text it reduces the font-size too much.

要显示自定义字体,我想要一个textarea,用户可以使用此自定义字体键入文本。当您键入一个单词时,font-size例如是150px,当您输入更多时,它应该减少字体大小并设置最小值。删除文本应该再次放大字体大小。我用一个简单的脚本尝试了这个,见下文,在输入一定数量的字符后减少了一定量的文字大小,但很难找到合适的比例。键入前几个单词并不会减少字体大小,而使用更多文本会减少字体大小。

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

This is a very simple example to test if this is possible, it only reduces the size.

这是一个非常简单的例子来测试这是否可行,它只会减小尺寸。

I've seen many * questions and js libraries (like FlowType and TextFill) to resize the textarea or divs to fit the text, but I have not found anything about dynamically resizing text within a textarea as you type.

我已经看到很多*问题和js库(如FlowType和TextFill)来调整textarea或div的大小以适应文本,但我没有找到任何关于在键入时动态调整textarea中文本的内容。

Any suggestions?

1 个解决方案

#1

try This Script

试试这个脚本

$(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" />