您的位置：首页 > 其它

textarea自适应高度

2012-07-06 14:46 218 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<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: 140px}

</style>
<script type="text/javascript" src="http://www.css88.com/jQuery/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.autoTextarea = function(options) {
var defaults={
maxHeight: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>
</head>
<body>
<div id="header">

<script language="JavaScript">
function toDesktop(sUrl,sName){
var WshShell = new ActiveXObject("WScript.Shell");
var oUrlLink = WshShell.CreateShortcut(WshShell.SpecialFolders("Desktop") + "\\" + sName + ".url");
oUrlLink.TargetPath = sUrl;
oUrlLink.Save();
}
</script>
<span onClick="toDesktop('http:\//www.baidu.com/','百度')" style="background:red">添加百度链连到桌面</span>
</div>
<div id="main">
<h1>【jQuery插件】autoTextarea-文本框根据输入内容自适应高度的实例页面</h1>
<div id="body" class="light">
<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>
<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">
$(".chackTextarea-area").autoTextarea({maxHeight:220});
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航