Web前端

yuhao_1202

浏览: 4481 次
性别:
来自: 长沙

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (4)

社区版块

存档分类

Web CSS IE

IE下的高度自适应Textarea

    最近做了高度自适应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下没有。

特整理下此文，当作笔记。

0
顶

0
踩

分享到：

Windows下有用的netstat -anb | Lotus Domino

2010-10-15 12:00
浏览 1069
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Web前端

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Web前端

评论

发表评论

相关推荐

最近访客更多访客>>