Question

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

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

用户按“输入”并创建换行符
用户输入的文字多于textarea的宽度，导致其分解

我已经看过一些我修改过的插件实例，它们创建了一个克隆的textarea或div，它们具有相同的样式，您可以尝试测量新的“高度”并根据此计算字体大小，但它似乎总是在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');
    }
});

示例

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

Answer 2

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

<强> 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/

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

2 个答案: