如何使textarea的高度自動調節佔位符內容？

我有textarea字段與長佔位符。它在大屏幕上看起來不錯。但是，當我在小屏幕上打開佔位符的某些部分變得隱藏，我必須向下滾動。如何使textarea的高度自動調節佔位符內容？

我希望佔位符自動調整其高度，無需任何滾動。

我試了很多，但我無法弄清楚。

這是真的可以根據佔位符中文本的數量調整textarea高度嗎？

例子是在這個jsfiddle和摘要：

textarea { 
 
    width: 100%; 
 
    padding-bottom: 10px; 
 
    padding-top: 10px; 
 
} 
 
#one { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid; 
 
    padding: 50px; 
 
} 
 
#two { 
 
    width: 400px; 
 
    height: 100px; 
 
    border: 1px solid; 
 
    padding: 50px; 
 
}

<div id="one"> 
 
    <textarea placeholder="Sample Text Sample Text Sample Text Sample Text"></textarea> 
 
</div> 
 

 
<div id="two"> 
 
    <textarea placeholder="Sample Text Sample Text Sample Text Sample Text "></textarea> 
 
</div>

來源

2015-10-17 Stack Developer

你正在使用tinyurl提供一個jsFiddle只是爲了避免警告你必須在SO上發佈一些相關的代碼，很好... –

使用媒體查詢來根據屏幕大小調整textarea大小？ –

不，我需要動態的方式，因爲我不確定textarea中的內容數量 –

我試着這樣做與textarea元素和放棄。這是可以做到與CONTENTEDITABLE同一個DIV： http://www.w3.org/TR/html5/editing.html#contenteditable

<div contenteditable="true"></div>

隨着高度自動那麼div會與內容增長。您只需使用JavaScript捕捉某些按鍵來創建您想要的用戶體驗（例如，默認情況下，輸入鍵將在可編輯內部創建另一個元素）。

來源

2015-10-17 13:52:38 ksnabb

但我們無法以這種方式設置佔位符。所以這對我不起作用。 –

如何使textarea的高度自動調節佔位符內容？

回答

相關問題