在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中調整字體大小以適合高度

回答

相關問題