<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="../css/demo.css" type="text/css" />
<link rel="stylesheet" href="../css/hl.css" type="text/css" />
<style type="text/css">
.demo { }
.float { width:200px; padding:5px 10px; border:1px solid #ffecb0; font-size:12px; background-color:#fffee0; -moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2); position:absolute; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.float .close-ico { position:absolute; top:5px; right:5px; display:block; width:16px; height:16px; background-image:url(img/close-ico.png); text-indent:-900px; overflow:hidden; }
.float .close-ico:hover { background-position:0 -16px; }
.float p { line-height:22px }
.chackTextarea-area{ line-height: 20px; font-size: 14px; font-family: "Helvetica Neue", Helvetica, Arial;resize: none; padding: 0;border: 1px solid #CDCDCD; width: 400px; height: 40px}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.autoTextarea = function(options) {
var defaults={
maxHeight:null,//文本框是否自动撑高,默认:null,不自动撑高;如果自动撑高必须输入数值,该值作为文本框自动撑高的最大高度
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 (opts.maxHeight && this.scrollHeight > opts.maxHeight) {
height = opts.maxHeight;
style.overflowY = 'scroll';
} else {
height = this.scrollHeight;
style.overflowY = 'hidden';
}
style.height = height + 'px';
}
});
});
};
})(jQuery);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div id="main">
<div id="body" class="light">
<div id="content" class="show">
<div class="demo">
<h4>这里输入多行文本试试:</h4>
<div class="chackTextarea">
<textarea name="textarea" id="textarea" cols="60" rows="4" class="chackTextarea-area"></textarea>
</div>
<div class="chackTextarea">
<textarea name="textarea" id="textarea1" cols="60" rows="4" class="chackTextarea-area"></textarea>
</div>
</div>
<h3>代码</h3>
<div class="demo">
<h5>CSS代码:</h5>
<pre name="code" class="css">
.chackTextarea-area{ line-height: 20px; font-size: 14px; font-family: "Helvetica Neue", Helvetica, Arial;resize: none; padding: 0;border: 1px solid #CDCDCD; width: 400px; height: 40px}
</pre>
<h5>JS代码,默认的参数及调用:</h5>
<pre name="code" class="js">
//默认的参数
$(".chackTextarea-area").autoTextarea({
maxHeight:220,//文本框是否自动撑高,默认:null,不自动撑高;如果自动撑高必须输入数值,该值作为文本框自动撑高的最大高度
minHeight:$(this).height()//默认最小高度,也就是文本框最初的高度,当内容高度小于这个高度的时候,文本以这个高度显示
})
</pre>
</div>
</div>
</div>
</div>
<script type="text/javascript">DlHighlight.HELPERS.highlightByName("code", "pre");//<pre>标签添加属性name="code"以及class="LANG" (LANG可以是"js", "css", "xml" and "html")</script>
<script type="text/javascript">
$(".chackTextarea-area").autoTextarea({maxHeight:220});
</script>
<!-- 43 queries. 0.519 seconds. -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-3448069-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>