Javascript 文本框textarea高度隨內(nèi)容自適應(yīng)增長收縮

2019-11-20 23:45:40

字體：大中小

供稿：網(wǎng)友

直接上代碼：
方案一：

方案一在各瀏覽器中，文本框隨內(nèi)容自適應(yīng)增長都沒有問題；但在刪除內(nèi)容時收縮方面表現(xiàn)有所差異，IE、Opera表現(xiàn)正常，F(xiàn)irefox、Chrome、Safari不會收縮。原因是文本框內(nèi)容高度小于文本框高度時scrollHeight值等于文本框高度，而不是文本框內(nèi)容高度。
方案二：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<HTML> 
<HEAD> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<TITLE>楓蕓志 » 文本框textarea高度自適應(yīng)增長/伸縮</TITLE> 
</HEAD> 
<BODY> 
<textarea id="txtContent" rows="5" cols="50" onkeyup="ResizeTextarea()" style="overflow-y:hidden;">Textarea高度隨內(nèi)容自適應(yīng)地增長，無滾動條 
晴楓制作 
http://VeVB.COm</textarea> 
<script type="text/javascript"> 
// 最小高度 
var minRows = 5; 
// 最大高度，超過則出現(xiàn)滾動條 
var maxRows = 12; 
function ResizeTextarea(){ 
var t = document.getElementById('txtContent'); 
if (t.scrollTop == 0) t.scrollTop=1; 
while (t.scrollTop == 0){ 
if (t.rows > minRows) 
t.rows--; 
else 
break; 
t.scrollTop = 1; 
if (t.rows < maxRows) 
t.style.overflowY = "hidden"; 
if (t.scrollTop > 0){ 
t.rows++; 
break; 
} 
} 
while(t.scrollTop > 0){ 
if (t.rows < maxRows){ 
t.rows++; 
if (t.scrollTop == 0) t.scrollTop=1; 
} 
else{ 
t.style.overflowY = "auto"; 
break; 
} 
} 
} 
</script> 
</BODY> 
</HTML> 

方案二在各瀏覽器中表現(xiàn)相同，皆可使文本框隨內(nèi)容自適應(yīng)增長和收縮。但有個缺憾是在文本框高度增長的時候，文本框顯示會有一個跳動。
另以上兩個方案對于通過文本框右鍵菜單選擇剪切、粘貼、刪除等命令操作文本內(nèi)容的情形都無效。可以說暫未找到完美的解決方案，留待以后再來研究。哪位同學(xué)如果有完美的方案的話敬請賜教！

其他方案：