文本输入框自适应高度

时间：2015-07-07 17:16:45 阅读：125 评论：0 收藏：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" 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>

自增前：

技术分享

自增后：

技术分享

文本输入框自适应高度

标签：html5 文本框文本输入框自适应高度

原文地址：http://blog.csdn.net/lixuegen/article/details/46788569

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行