想到的第一个方案是用一个div装下textarea中的文本, 让各种相关样式相同, 这样div的高就应该是textarea的高了. 于是很快写了出来. 但因为毕竟一个是text, 一个是html, 各种转换也比较麻烦. 遇到了不换行的长文本(英文), 处理起来就更不方便了. 还有空格什么的处理. 比如 "abc abc" 这样, 中间是不会换行的, 如果替换两个空格为一个空格加一个 " ", 依旧有小问题, 具体就不说了.
说到这里, 大家可能会提出一个常见的方案, 也就是利用textarea自身的scrollHeight属性. 不错, 但是当textarea变高之后, 即使内容删掉, 也变不回原来的高度了. 但, 如果说, 一个textarea的高度很小, 那么scrollHeight不就一直都表示内容的高度了么? 这就是key所在了, 用div做副本不行, 我们可以用textarea啊!
最终代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>文本框高度自适应</title> <style type="text/css"> #shadow, #text { font: 12px/16px Arial; width: 200px; overflow: hidden; height: 16px; } #shadow { position: absolute; border-width: 0px; padding: 0px; visibility: hidden; } #text { resize: none; } </style> <script type="text/javascript"> /* 文本框高度自适应 by VILIC VANE Web www.vilic.info Email i@vilic.info */ window.onload = function () { var text = document.getElementById("text"); //用户看到的文本框 var shadow = document.getElementById("shadow"); //隐藏的文本框 text.oninput = //非IE的 text.onpropertychange = //IE的 onchange;
function onchange() {
shadow.value = text.value;
setHeight();
setTimeout(setHeight, 0); //针对IE 6/7/8的延迟, 否则有时会有一个字符的出入
function setHeight() {
text.style.height = shadow.scrollHeight + "px";
}
}
};
</script>
</head>
<body>
<textarea id="text"></textarea>
<textarea id="shadow"></textarea>
</body>
</html>
