火狐下textarea高度自适应解决方案_Javascript教程_H5之家

火狐下textarea高度自适应解决方案

教程网3月25日整理

在网上找了段代码'textarea.style.posHeight=this.scrollHeight ' 这个使用在IE下可以；
但是发现在火狐里高度不能自适应，当文本增加的时候，高度是可以增加；可是当文本减少的时候，高度不会变！！
唉有没有高人解决了这个问题！

终于在网上找到了一个例子，目前测试了都是可以的！激动啊，学习！
把代码贴上了，给大家分享下！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
#info {
      font-size: 12px;
      overflow:hidden;
      background-color: #FFFFEA;
      border:1px solid #CCCCCC;
      color: black;
      padding-right:5px;
      padding-left:5px;
      font-family: courier;
      width:100%;
      letter-spacing:0;
      line-height:12px;


      }
  </style>
</HEAD>

<BODY>

   <div id="sdf" style="width:400px;">
   <textarea id="info" onBlur="saveInfo()" onMouseOut="saveInfo()" onKeyUp="setRows()"></textarea>
   </div>
      <script language="JavaScript">
      function saveInfo() {
      var text = document.getElementById("info").value;
      //再用ajax向数据库中更新当前修改内容
      }
      function setCols() {
      var textarea = document.getElementById("info");
      textarea.setAttribute("cols", Math.floor(textarea.clientWidth / 7));
      setRows();
      }
      function setRows() {
      var textarea = document.getElementById("info");
      var cols = textarea.cols;
      var str = textarea.value;
      str = str.replace(/\r\n?/, "\n");
      var lines = 2;
      var chars = 0;
      for (i = 0; i < str.length; i++) {
         var c = str.charAt(i);
         chars++;
         if (c == "\n" || chars == cols) {
            lines ++;
            chars = 0;
         }
      }
      textarea.setAttribute("rows", lines);
      textarea.style.height = lines*12 + "px";
      }
      function setDefault(){
         var textarea=document.getElementById("info");
         textarea.value="";
      }
      setDefault();
      setCols();
   </script>
</BODY>
</HTML>

JavaScript教程/编