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

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

我基本上想要一个textarea的'自动'字体大小。问题在于一个事实，即有该字体需要得到“小”两种不同的方式：

用户按下“Enter”键，并创建一个换行符
用户输入比的宽度更文本textarea的，使其分解

我已经看到了，我已经修改插件的少数情况下，创建一个克隆的文字区域或分度，相同的样式，你可以尝试来衡量新的“高度”和根据此计算字体大小，但它似乎总是在Safari和Chrome中失败，所以我猜这个逻辑有点缺陷。

以前有人做过这个或者知道插件已经完成了吗？

来源

2012-02-09 ncyankee

我从来没有见过这种不使用等宽字体，让您准确地预测文本大小做成功。一个相当大的限制。 – mrtsherman 2012-02-09 04:38:48

试试这个应该工作，但是我不知道性能寿：

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/

来源

2012-02-09 04:50:51 elclanrs

如果我删除一些文字会怎么样？它应该增加字体大小 – 2012-02-09 05:28:45

那么，你可以弄清楚。这应该让你走在正确的道路上。无需为完美有效的解决方案投票。 – elclanrs 2012-02-09 05:33:11

其实I + 1，但认为一旦得到完整的解决方案将给+1，但无论如何+1没有完整的解决方案:) – 2012-02-09 05:37:56

而不是使用一个textarea的，你可以使用同一个contenteditable="true"div。
该解决方案适用于删除文本并增加字体大小。

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

了Exa mple

http://jsfiddle.net/gwyqsk0s/

来源

2015-06-25 00:41:51 seppli

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

回答

相关问题