textarea的大小可以根據輸入的內容來確定

我在表單上有一個textarea，填充了數據庫查詢中的文本，可以讓其他人編輯。textarea的大小可以根據輸入的內容來確定

我希望textarea能夠在不需要滾動的情況下顯示整個內容，但不希望在只有少量文本時放置大的textarea。

文本可以是5到300個字符。

我見過這種類型的問題的解決方案，但只有textarea增長onkeyup如下所示。

<script> 
function textAreaAdjust(o) { 
o.style.height = "1px"; 
o.style.height = (25+o.scrollHeight)+"px"; 
} 
</script> 
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>

來源

2012-05-11 Darren Cook

首先，不要使用onkeyup。它不適合檢測文本輸入。

我使用下面的代碼來調整一個textarea不斷調整一個textarea元素以適應內容：

var tarea = document.getElementsByTagName("textarea")[0]; 

tarea.oninput = function() { 
    tarea.style.height = tarea.scrollHeight + "px"; 
}

然而，oninput是不是在舊版本的IE瀏覽器的支持，所以你需要添加onpropertychange如果你需要在IE 8中運行，下：

var tarea = document.getElementsByTagName("textarea")[0]; 

tarea.oninput = tarea.onpropertychange = function (evt) { 
    evt = evt || window.evt; 
    if (evt.type == "propertychange" && evt.propertyName != "value") 
     return; 

    tarea.style.height = tarea.scrollHeight + "px"; 
}

工作演示：http://jsfiddle.net/D5e8t/

來源

2012-05-11 12:12:19

嗨安迪，謝謝你。你的代碼可以正常工作，當從數據庫內容加載頁面時，textarea正在被填充。所以我需要輸入框來觸發你的腳本。我希望textarea根據正在構建頁面時添加的文本大小。 –

@DarrenCook：在這種情況下，只需在文檔加載時（即在頁面底部包含一個單獨的腳本）中調用相同的代碼'tarea.style.height = tarea.scrollHeight +「px」'。 –

謝謝安迪 - 問題解決了。 –

您可以在頁面加載時調用該方法。

來源

2012-05-11 12:00:50

將textarea的內容複製到具有相同寬度的不可見div，以及影響大小（font-size，line-height，padding等）的樣式。測量div的高度，並將textarea設置爲相同的高度。

來源

2012-05-11 12:10:38 Litek

只需對上述代碼稍作修改即可使textarea自動調整。只是perfiorm以下步驟

1）添加ID到您的文本區域

<textarea onkeyup="textAreaAdjust(this)" id="txt" runat="server" style="overflow:hidden"></textarea>

2）之前波特標籤的關閉添加的JavaScript代碼來調用testAreaAdjust阻止

<script type="text/javascript">
textAreaAdjust(document.getElementById('txt'));
</script>

這會自動調整文本框的大小。希望這會幫助你

來源

2012-05-11 12:25:03

textarea的大小可以根據輸入的內容來確定

回答

相關問題