固定文本区域中的自动字体大小调整答案

【问题标题】：auto font-size adjustment in fixed textarea固定文本区域中的自动字体大小调整
【发布时间】：2015-11-17 13:15:54
【问题描述】：

我遇到了问题。我有一个固定宽度和高度（750x393px）和大字体大小（例如100px）的文本区域。如果您在此文本区域中键入，字体大小应自动减小，以便键入的文本适合文本区域。如果你删除一些字符，字体大小应该会增加。

你知道我的意思吗？应该没有溢出和滚动条。字体大小应减小或增大，以使文本适合文本区域。

a 找到了一个类似的完美脚本，但这是一个 div，而不是 textarea，我不知道如何将其更改为 textarea：

HTML：

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

JS：

$('#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');
    }
});

CSS：

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

看看jsfiddle：http://jsfiddle.net/gwyqsk0s/

这是一个带有文本区域的脚本，但如果我删除一些字符，字体大小不会增加：http://jsfiddle.net/XCXJb/1/

有人可以帮我吗？

【问题讨论】：

对不起，如果我错过了你的意思，但你为什么不能使用工作 div 版本？你可以从innerHTML中获取值吗？
@ncq 我想发送输入的文本！

标签： javascript html

【解决方案1】：

这部分有问题：

$(this).css('font-size', '+=1');

应该是：

$(this).css('font-size', (parseInt($(this).css('font-size')) + 1) + 'px');

【讨论】：

【解决方案2】：

这很棘手。首先，您必须在可调整大小的textarea 中找出文本的height。为此，我们创建另一个textarea，将height 设置为0 px，因此我们可以通过scrollHeight 属性轻松检查其文本height。

我们还必须将主要textarea 中的文本传递给按键上的虚拟textarea。

HTML：

<textarea id="textarea"></textarea>
<textarea id="dummy"></textarea>

JS：

function getHeight(){

    $("#dummy").val( $("#textarea").val() );
    return $("#dummy").prop("scrollHeight");

}

$('#textarea').keyup(function(event){

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

});

CSS：

#textarea, #dummy {

    width: 200px; 
    font-size: 18px;

}

#textarea {

    height: 100px;
    resize: none;
    overflow-y: hidden;

}

#dummy {

    visibility: hidden;
    height: 0px;

}

一个有效的小提琴是here。

【讨论】：