喵喵笨兔 の 喵喵的家~遊戲天地 - 首頁(上版面)
喵喵笨兔 の 喵喵的家~遊戲天地 - 首頁(左版面)
首  頁 最新消息 遊戲攻略 遊戲影片 遊戲圖片 下載區 學習分享 留言板 FB粉絲團
 喵喵笨兔 の 喵喵的家~遊戲天地 - 網頁設計:文字區域 (textarea) 自動高度調整

網頁設計:文字區域 (textarea) 自動高度調整

文字區域 (textarea) 自動高度調整

 文字區域 (textarea) 輸入文字超過設定的行數後,就會出現滾軸視窗。若想讓文字區域的高度隨著輸入文字行數自動調整,找來二種方種供參考之:

範例程式碼(jQuery):此法簡潔方便好用^^

  1. 直接以程式碼來說明,必需掛載 jQuery。主要為紅色字部份
  2. jQuery 主站及下載:http://jquery.com/
  3. 本小站下載: 含 Bootstrap 3.3.7& jQuery 1.11.3 ~ 3.2.1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網頁設計:文字區域 (textarea) 自動高度調整</title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
   jQuery(function($) {
       $("textarea.AutoHeight").css("overflow","hidden").bind("keydown keyup", function(){
           $(this).height('0px').height($(this).prop("scrollHeight")+"px");
       }).keydown();
   });
</script>

</head>

<body>
  <p><textarea class="AutoHeight"></textarea></p>

  <p>文字區域內已有文字的情形下(再輸入跳行試試):<br><textarea class="AutoHeight">第1行
     第2行
     第3行
     第4行</textarea></p>
		
</body>
</html>

【範例結果】

文字區域內已有文字的情形下(再輸入跳行試試):


範例程式碼(script):

  1. 直接以程式碼來說明。主要為紅色字部份
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網頁設計:文字區域 (textarea) 自動高度調整</title>

<script> 
   function autogrow(textarea){
     var adjustedHeight=textarea.clientHeight;
         adjustedHeight=Math.max(textarea.scrollHeight,adjustedHeight);
         if (adjustedHeight>textarea.clientHeight){
             textarea.style.height=adjustedHeight+'px';
         }
     }
</script>

</head>

<body>
  <p><textarea onkeyup="autogrow(this);"></textarea></p>

  <p>文字區域內已有文字的情形下(再輸入跳行試試):<br><textarea onkeyup="autogrow(this);">第1行
     第2行
     第3行
     第4行</textarea></p>
		
</body>
</html>    

【範例結果】

文字區域內已有文字的情形下(再輸入跳行試試):


笨兔隨手筆記於 2019/1/30

喵喵笨兔 の 喵喵的家~遊戲天地
http://vv0817.tk
http://vvv.lionfree.net
http://vvv.myweb.hinet.net