在进入正文前，有两个题外话要说：

• 首先，对关注CSS9.NET的朋友说一声抱歉。由于之前的一个多月出差在外，从上次更新至今已有一个多月没更新了，而且之中回答博友的留言也时有拖沓。令我感动的是此间博客的访问量并未减少（:( 也未见增长），还是经常会有朋友留言，在此对大家的关注表示感谢。今天是出差后第一天上班，从今天起恢复网站的更新，为大家分享更多文章、资源。
• 在这一个多月，先是由于备案问题网站转至国外，后又因网速问题转至国内，中间可谓一波三折，还费了不少银子。从国外服务器转至国内后，发现右侧边栏中的“最近留言”板块出现了乱码。数据库中数据没有乱码，在文章下方的留言区域也没有乱码。一直没有找到原因，在这里向过路的朋友求助。

————————————————————————————
下面言归正传，为大家分享一款jquery插件。

文本框textarea是在网站中经常用到到多行文本输入标签，例如本文下面的留言输入框。一般情况下，我们会通过指定textarea的rows和cols属性来控制大小。当在textarea输入较多文本超过预设行数时，就会出现侧边滚动条。这样难免会将部分文本遮挡，当想回顾已输入内容时，还要去拖动滚动条，来来回回，煞是不爽。如果可以让textarea根据用户输入的文本内容自动扩展，就可以解决这个问题了，有助于改善用户体验。“autoresize”这款jquery插件就是用来解决这个问题的。

1. 口说无凭，眼见为实。先看下面的演示效果（或者看这个页面）：

   在这里输入内容，当内容超出文本框高度时，文本框会自动扩展

   在该示例中可以看到textarea在扩展时使用了动画效果，比较平滑。当文本框扩展至一定高度时不再扩展，出现滚动条。这两点都可通过参数设置。

2. 使用方法：
   html代码定义文本框

   <textarea id="test-comment" style="width: 400px; padding: 5px; height: 50px; display: block;">
           在这里输入内容，当内容超出文本框高度时，文本框会自动扩展
   </textarea>

   javascript代码

   $(function(){
   	$('textarea#test-comment').autoResize({
              // 文本框改变大小时触发事件，这里改变了文本框透明度
              onResize : function() {
                   $(this).css({opacity:0.8});
              },
             // 动画效果回调触发事件，这里改变了文本框透明度
             animateCallback : function() {
                  $(this).css({opacity:1});
             },
            // 动画效果持续时间（ms），默认150
           animateDuration : 300,
           // 每次改变大小时，扩展（缩小）的高度（像素），默认20
           extraSpace : 30,
           //当文本框高度大于多少时，不再扩展，出现滚动条，默认1000
   	limit: 200
       });
   })

   插件的配置参数参考上面javascript代码中的注释。如果不需要动画效果，可设置animate属性为false（默认为true）。

3. 下载autoresize插件及示例代码：点击下载

延伸阅读:

1. Jquery Tools——不可错过的Jquery UI库（三）
2. 简洁易用的html编辑器——TinyEditor
3. jQuery Tools——不可错过的jQuery UI库（六）
4. Jquery Tools——不可错过的Jquery UI库（四）
5. 通过javascript实现的快速编码解码服务
6. 实现页面不同位置间平滑滚动的两种解决方案
7. jQuery Tools——不可错过的jQuery UI库（五）
8. 使用CSS和JQuery轻松切换网页显示样式

---