基于jQuery的“autoresize”插件自动改变textarea大小
时间：2009-12-16 来源：互联网
文本框textarea是在网站中经常用到到多行文本输入标签，例如本文下面的留言输入框。一般情况下，我们会通过指定textarea的rows和cols属性来控制大小。当在textarea输入较多文本超过预设行数时，就会出现侧边滚动条。这样难免会将部分文本遮挡，当想回顾已输入内容时，还要去拖动滚动条，来来回回，煞是不爽。如果可以让textarea根据用户输入的文本内容自动扩展，就可以解决这个问题了，有助于改善用户体验。“autoresize”这款jquery插件就是用来解决这个问题的。
使用方法：
1.html代码定义文本框
XML/HTML Code复制内容到剪贴板
- <textarea id="test-comment" style="width: 400px; padding: 5px; height: 50px; display: block;">
- 在这里输入内容，当内容超出文本框高度时，文本框会自动扩展
- </textarea>
2.javascript代码
折叠JavaScript Code复制内容到剪贴板
- $(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）。
- 栏目搜索>>分类导航
-
Flash幻灯
jQuery幻灯
JS幻灯
Flash相册
jQuery相册
图片特效
导航菜单
广告代码
在线客服
表单按钮
其它特效
-
HTML
CSS
JavaScript
Dreamweaver
Fireworks
设计分享
-
建站教程
网站运营
实用工具
网页模板
网页素材
- CSS酷站 网上购物 设计团队 设计博客