Textarea根據內容及其長度自動調整自己的字體大小

這已被問到，但因爲它似乎不適用於Javascript。Textarea根據內容及其長度自動調整自己的字體大小

我想創建一個TextArea，它包含兩組字體大小，一個用於包含少於3行的字體大小，另一個用於包含不止於此的字體大小。

唯一的問題是，不僅Textarea中的行數會影響所選的字體大小，而且還會是內容量，因爲當某人只輸入一行文本而沒有一個換行符時，Textarea將打破線條（不幸的是，使用另一個水平滾動可用的包裝並不是一種解決方案）。

我創建一個的相關詳細的jsfiddle：http://jsfiddle.net/kF9LY

我怎樣才能測量textarea的的一個方式。價值的內容，將給我所使用的線的明確計算，無論是由換行或由內容超過所述寬度單行（因此顯示在第二行）？

來源

2012-06-11 SquareCat

就我所知，您所描述的行數不能被測量。

您可能能夠檢測到關鍵事件textarea的scrollHeight是否已經變得大於其高度，這意味着滾動條已經出現，然後您可以根據需要調整字體大小。

來源

2012-06-11 22:57:46 dqhendricks

最後，我設法找到了一個基於測量scrollHeight的解決方案。我很幸運，即使溢出也是如此：隱藏。這並不容易，因爲我必須在每次按鍵後通過模擬添加另一個字符來進行計算。當我使用非固定寬度字體時，我選擇將大寫「W」字符添加到textareas內容中，然後測量之後發生的事情。之後我會刪除額外的字符。雖然起初它感覺像一個骯髒的方法，結果證明工作得很好。 – SquareCat

@ user1018787不錯！ – dqhendricks

看起來您可以從問題中的答案之一找到行數，How to get number of rows in <textarea >?。

來源

2012-06-11 23:23:56 mark

我沒有找到這個！恥辱！我會嘗試發佈解決方案[這裏]（http://stackoverflow.com/a/1761203/1018787），如果它的工作將接受這個答案 – SquareCat

對不起，但使用這種方法我無法得到正確的結果。 – SquareCat

Textarea根據內容及其長度自動調整自己的字體大小

回答

相關問題