<!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>
autoTextarea-文本框根据输入内容自适应高度
最新推荐文章于 2024-01-19 10:39:04 发布
130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
