Textarea隨着內容的增長和收縮而達到最大高度

首先，我知道在這裏已經提到類似的問題，儘管他們沒有一個專門做我的標題要求的東西。Textarea隨着內容的增長和收縮而達到最大高度

我試圖創造增長和根據其內容的高度縮小簡單的textarea的輸入，但只有一個最大高度。一旦達到最大高度，它將垂直滾動。

我遇到了一個純CSS和HTML解決方案，但不幸的是它不是跨瀏覽器的，而且可能相當麻煩。但它應該給你所有我想要實現的想法。

HTML：

<div contenteditable> 
    type here... 
</div>

CSS：

div[contenteditable] { 
    border: 1px solid black; 
    max-height: 100px; 
    overflow-y: auto; 
    overflow-x: hidden; 
    width: 200px; 
}

WORKING EXAMPLE

是否有解決方案，不使用contenteditable，可以複製上述考試僅使用文本輸入還是textarea？

來源

2014-09-06 Fizzix

嘗試http://unwrongest.com/projects/elastic/ – charlietfl 2014-09-06 13:02:07

我一直在尋找一個解決同樣的問題，並意識到使用彈性JavaScript解決方案似乎是最好的全能解決方案。經測試，在所有現代瀏覽器，包括回IE9：

查看工作演示在這裏： http://jsfiddle.net/mupbrtpv/

使用你選擇的最大高度上的文本區域，以防止從高度擴張超過您想要的限制。

HTML：

<textarea id="description" placeholder="input your text here"></textarea>

CSS：

textarea#description{width: 300px; max-height: 400px;}

Javscript：

$('#description').elastic();

來源

2014-09-06 23:27:03 Garconis

效果很好。儘管它似乎總是在當前輸入的行的下面有一個額外的行。有沒有辦法去除這個？ – Fizzix 2014-09-06 23:53:45

@fizzix我不太熟悉它是如何工作的，除非你看到額外的行在按Enter鍵後纔會使用一小部分，或者在textarea中創建一行新文本。但是，看起來在一秒鐘之後，它會再次創建一個「新」空白行 - 可能有助於提示用戶該盒子有更多可用空間。我不知道如何解決這個問題。 – Garconis 2014-09-07 01:46:18

Textarea隨着內容的增長和收縮而達到最大高度

回答

相關問題