快捷導(dǎo)航

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

更新時(shí)間：2011年07月13日 00:33:07 作者：

之前一段時(shí)間項(xiàng)目中用到的一個(gè)功能，用Javascript控制文本框textarea高度隨內(nèi)容自適應(yīng)增長收縮，今天花了點(diǎn)時(shí)間換了種實(shí)現(xiàn)方法，總結(jié)一下。

直接上代碼：
方案一：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

方案一在各瀏覽器中，文本框隨內(nèi)容自適應(yīng)增長都沒有問題；但在刪除內(nèi)容時(shí)收縮方面表現(xiàn)有所差異，IE、Opera表現(xiàn)正常，F(xiàn)irefox、Chrome、Safari不會(huì)收縮。原因是文本框內(nèi)容高度小于文本框高度時(shí)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>楓蕓志 &raquo; 文本框textarea高度自適應(yīng)增長/伸縮</TITLE> 
</HEAD> 
<BODY> 
<textarea id="txtContent" rows="5" cols="50" onkeyup="ResizeTextarea()" style="overflow-y:hidden;">Textarea高度隨內(nèi)容自適應(yīng)地增長，無滾動(dòng)條 
晴楓制作 
http://jb51.net</textarea> 
<script type="text/javascript"> 
// 最小高度 
var minRows = 5; 
// 最大高度，超過則出現(xiàn)滾動(dòng)條 
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)增長和收縮。但有個(gè)缺憾是在文本框高度增長的時(shí)候，文本框顯示會(huì)有一個(gè)跳動(dòng)。
另以上兩個(gè)方案對(duì)于通過文本框右鍵菜單選擇剪切、粘貼、刪除等命令操作文本內(nèi)容的情形都無效?？梢哉f暫未找到完美的解決方案，留待以后再來研究。哪位同學(xué)如果有完美的方案的話敬請(qǐng)賜教！

其他方案：