文本输入框自适应高度

Posted 2020-09-24 yfceshi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文本输入框自适应高度相关的知识，希望对你有一定的参考价值。

<!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>

自增前：

技术分享

自增后：

技术分享

以上是关于文本输入框自适应高度的主要内容，如果未能解决你的问题，请参考以下文章

layui弹框自适应高度

文本框宽度可以根据文字长度自适应吗？css怎么写？

overflow:hidden;zoom:1;外框自适应 [转]

textarea高度自适应问题

如何让textarea的高度自适应