文本输入框自适应高度

最新推荐文章于 2023-04-19 14:52:45 发布

robinLi0913

最新推荐文章于 2023-04-19 14:52:45 发布

阅读量5.4k

点赞数 1

分类专栏：其他 HTML5 文章标签： HTML5 文本框文本输入框自适应高度

本文链接：https://blog.csdn.net/lixuegen/article/details/46788569

版权

其他同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

HTML5

2 篇文章 0 订阅

订阅专栏

<!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" οnkeyup="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>

自增前：