[align=center][size=x-large][b]IE下的高度自适应Textarea[/b][/size][/align]
最近做了高度自适应TextArea,参考了网上一些方案，结合自己所碰到的问题，整理如下：
(一般只有IE下才支持，FF下的可能不支持)
要实现高度自适应的TextArea,根据网上的讨论，有两种方法，一种是纯CSS，另一种是JS控制CSS。
纯CSS的比较简单，直接为textarea设置属性overflow-y:visible就OK，但其适应环境也简单，
以上代码在IE8下打开是成功的，但如果textarea被嵌套在某些其他元素内部时，高度就会受到限制（因为定义自适应textarea的要点就是不能在上下文中明确地指定相关的高度值，否则高度就会被固定死）。
因此，考虑到各种DIV、TD嵌套的情况，更适用的是下面的JS控制CSS方案。
以上代码，在IE8下测试时有效，但在我的工程测试代码中，minHeight也起到了限制最低高度的作用，但在单独运行上面代码时，发现并没有起作用，分析认为：在我的工程中，可能是DIV的嵌套关系或者其他的某些关系中，某个父DIV的固定了高度，上面所粘贴的源码中，t的高度直接受制于body,所以导致了minHeight无效。(以上高度posHeight可以换成height).
对于FF下，很抱歉，onpropertychange是IEonly的函数，FF下没有。
特整理下此文，当作笔记。
最近做了高度自适应TextArea,参考了网上一些方案，结合自己所碰到的问题，整理如下：
(一般只有IE下才支持，FF下的可能不支持)
要实现高度自适应的TextArea,根据网上的讨论，有两种方法，一种是纯CSS，另一种是JS控制CSS。
纯CSS的比较简单，直接为textarea设置属性overflow-y:visible就OK，但其适应环境也简单，
<html>
<head>
<title>测试</title>
</head>
<body>
<textarea style="overflow-y:visible"></textarea>
</body>
</html>以上代码在IE8下打开是成功的，但如果textarea被嵌套在某些其他元素内部时，高度就会受到限制（因为定义自适应textarea的要点就是不能在上下文中明确地指定相关的高度值，否则高度就会被固定死）。
因此，考虑到各种DIV、TD嵌套的情况，更适用的是下面的JS控制CSS方案。
<html>
<head>
<title>测试</title>
</head>
<body>
<textarea id="t" style="overflow-y:visible"></textarea>
</body>
<script type="text/javascript">
var t=document.getElementById("t");
if(t){
t.style.minHeight='80px';
t.onpropertychange=function(){
t.style.posHeight=t.scrollHeight;
};
}else{
alert("the DOM must haven't been loaded successfully yet,so the browser can't get the textarea object");
}
</script>
</html>
以上代码，在IE8下测试时有效，但在我的工程测试代码中，minHeight也起到了限制最低高度的作用，但在单独运行上面代码时，发现并没有起作用，分析认为：在我的工程中，可能是DIV的嵌套关系或者其他的某些关系中，某个父DIV的固定了高度，上面所粘贴的源码中，t的高度直接受制于body,所以导致了minHeight无效。(以上高度posHeight可以换成height).
对于FF下，很抱歉，onpropertychange是IEonly的函数，FF下没有。
特整理下此文，当作笔记。
3574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
