文本输入框自适应高度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   <HTML>

   <HEAD>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <TITLE>文本框textarea高度自适应增长/伸缩</TITLE>
   </HEAD>

   <BODY>
       <textarea id="txtContent1" rows="5" cols="50" onkeyup="ResizeTextarea(1)" style="overflow-y:hidden;resize: none;">Textarea高度随内容自适应地增长，无滚动条
       </textarea>
       <script type="text/javascript">
           // 最小高度
           var minRows = 5;
           // 最大高度，超过则出现滚动条
           var maxRows = 60;

           function ResizeTextarea(index) {
               var t = document.getElementById('txtContent' + index);
               if (t.scrollTop == 0) t.scrollTop = 1;
               while (t.scrollTop == 0) {
                   if (t.rows > minRows)
                       t.rows--;
                   else
                       break;
                   t.scrollTop = 1;
                   if (t.rows < maxRows)
                       t.style.overflowY = "hidden";
                   if (t.scrollTop > 0) {
                       t.rows++;
                       break;
                   }
               }
               while (t.scrollTop > 0) {
                   if (t.rows < maxRows) {
                       t.rows++;
                       if (t.scrollTop == 0) t.scrollTop = 1;
                   } else {
                       t.style.overflowY = "auto";
                       break;
                   }
               }
           }
       </script>
   </BODY>

</HTML>

自增前：

自增后：

文本输入框自适应高度

猜你喜欢