Web前端

最新推荐文章于 2024-12-04 20:23:09 发布

最新推荐文章于 2024-12-04 20:23:09 发布 · 125 阅读

文章标签：

[align=center][size=x-large][b]IE下的高度自适应Textarea[/b][/size][/align]
最近做了高度自适应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下没有。

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