jquery實現TextArea高度自適應代碼

突然發現，textarea可以顯示使用者輸入原生的元素。用一段js代碼控制其高度即可，相關代碼如下：

樣式：

代碼如下	複製代碼
<style type="text/css"> .textarea{width:300px;border:0px;background:none;} </style>

模板資料繫結：

代碼如下	複製代碼
<textarea class='textarea'> </textarea>

js代碼：

代碼如下	複製代碼
<script type="text/javascript"> /** 讓textarea 自適應高度 */ $(".textarea").each(function(){  $(this).css("height",$(this).attr("scrollHeight")); }); </script>

上面這個只是簡單做法，下面考慮到相容性

代碼如下

複製代碼

/// <reference path="jquery-1.5.1.min.js" /> $.fn.extend({     textareaAutoHeight: function (options) {         this._options = {             minHeight: 0,             maxHeight: 1000         }         this.init = function () {             for (var p in options) {                 this._options[p] = options[p];             }             if (this._options.minHeight == 0) {                 this._options.minHeight=parseFloat($(this).height());             }             for (var p in this._options) {                 if ($(this).attr(p) == null) {                     $(this).attr(p, this._options[p]);                 }             }             $(this).keyup(this.resetHeight).change(this.resetHeight)             .focus(this.resetHeight);         }         this.resetHeight = function () {             var _minHeight = parseFloat($(this).attr("minHeight"));             var _maxHeight = parseFloat($(this).attr("maxHeight"));             if (!$.browser.msie) {                 $(this).height(0);             }             var h = parseFloat(this.scrollHeight);             h = h < _minHeight ? _minHeight :                         h > _maxHeight ? _maxHeight : h;             $(this).height(h).scrollTop(h);             if (h >= _maxHeight) {                 $(this).css("overflow-y", "scroll");             }             else {                 $(this).css("overflow-y", "hidden");             }         }         this.init();     } });

需要引用jQuery檔案，使用方法很簡單，比如：

代碼如下	複製代碼
<textarea id="textarea1"></textarea> <textarea id="textarea2"></textarea> <textarea id="textarea3"></textarea> <script>   //最小高度和最大高度預設   $("#textarea1").textareaAutoHeight();   //最大高度為100px   $("#textarea2").textareaAutoHeight({ maxHeight:100 });   //最小高度為50px，最大高度為200px   $("#textarea3").textareaAutoHeight({ minHeight:50, maxHeight:200 }); </script>

就是在非ie下如果不先將textarea的高度改為0，擷取到的scrollHeight就是不正常的，貌似每取一次scrollHeight的值，其scrollHeight值就會修正一點,下面推薦一款外掛程式，這個可以很好解決這個問題。

textarea自適應高度外掛程式 textareaAutoHeightjQuery

功能: <textarea/>輸入框自適應高度
特點: 支援剪下/粘貼, 不閃屏, 體積迷你(不到1k)
相容: 幾乎所有主流瀏覽器(國內山寨貨未測試)
示範: 見小站文章頁底部的評論輸入框

使用方法:
0. 檢查CSS檔案中所有textarea的line-height值, 若是純數字, 給它加上單位em, 如: 1.5em. 否則IE(6|7|8)下外掛程式失效.
1. 載入jQuery庫(1.4+)
2. 載入textareaAutoHeight.js
3. 使用以下介面調用外掛程式:

代碼如下	複製代碼
$('textarea').tah({     moreSpace:15,   //輸入框底部預留的空白, 預設15, 單位像素     maxHeight:600,  //指定Textarea的最大高度, 預設600, 單位像素     animateDur:200  //調整高度時的動畫過渡時間, 預設200, 單位毫秒 });