使用"autoresize"插件自动改变textarea大小 - ffasp.com

文章地址：http://www.ffasp.com/content.asp?newsid=1718  关注Web前端开发 - ffasp.com

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



 

 

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
    });
})

 

下载地址：http://www.rayfile.com/zh-cn/files/c125c90c-6658-11e0-b10f-0015c55db73d/

百度统计