首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

autoTextarea-文本框依据输入内容自适应高度

2012-09-01 
autoTextarea-文本框根据输入内容自适应高度!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional/

autoTextarea-文本框根据输入内容自适应高度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xml:lang="en-US" lang="en-US" xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><title>autoTextarea</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script>(function($){    $.fn.autoTextarea = function(options) {        var defaults={            maxHeight:360, //默认最大高度            minHeight:$(this).height() //默认最小高度,也就是文本框最初的高度,当内容高度小于这个高度的时候,文本以这个高度显示        };        var opts = $.extend({},defaults,options);        return $(this).each(function() {            $(this).bind("paste cut keydown keyup focus blur",function(){                var height,style=this.style;                this.style.height =  opts.minHeight + 'px';                if (this.scrollHeight > opts.minHeight) {                    if (this.scrollHeight > opts.maxHeight) {                        height = opts.maxHeight;                        style.overflowY = 'scroll';                    } else {                        height = this.scrollHeight;                        style.overflowY = 'hidden';                    }                    style.height = height  + 'px';                }            });        });    };})(jQuery);</script></head><body><textarea id="ta" style="width:200px;height:28px;"></textarea><script>$('#ta').autoTextarea();//$('#ta').autoTextarea({maxHeight:240,minHeight:30});    这是完整用法</script></body></html>

热点排行