首页 > 代码库 > 不积跬步无以至千里----高度自适应的textarea

不积跬步无以至千里----高度自适应的textarea

2024-07-08 15:42:12   224人阅读

在某个项目里面，有这样的一个小需求。

textarea的高度自适应，当高度高于300px之后，textarea高度不再增高，出滚动条。当高度小于某个高度例如80px的时候，高度不再变小。

其实这个需求在很多地方都有出现过，例如微博的评论框，还有各种评论框。

谈不上什么有难度的技术，写下来当一个小插件积累。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>高度自适应的textarea</title>
<link rel='stylesheet' type='text/css' href='http://static.100.com/css/base.css?v=201404251401' />
<style>
.mod-solution{ padding:16px 21px 21px 21px; overflow:hidden;zoom:1; width:648px; margin:0 auto;}
.mod-solution .mhd h2{ font-size:24px; color:#535353; font-family:"Arial"; font-weight:normal;}
.so-count{ text-align:right; line-height:30px;}
.so-count em{ color:#ff8b50;}
.mod-solution .mbd{ overflow:hidden;zoom:1; padding-bottom:13px;}
.mod-solution .mft{ text-align:right;}
.mod-solution textarea,.copyCode{ width:626px; height:89px; overflow:hidden; border:1px solid #95c779; padding:5px 10px;}
.copyCode{ display:none; height:auto; min-height:89px;word-wrap: break-word;
word-break: normal;}
.mod-solution .greenBtn{ display:inline-block; padding: 0 14px; color:#fff; font-size:14px; height:32px; line-height:32px; background-color:#63c15f; text-decoration:none;}
.unPlBtn{  background-color: #eeeeee;
  color: #b4b4b4;
  display: inline-block;
  padding: 5px 15px;
  margin: 0;}
  .plBtn {
  display: none;
  background: #63c15f;
  color: #fff;
  padding: 5px 15px;
}

</style>
</head>

<body>
<div class="mod-solution">
	<div class="mhd">
    	<h2>My Answer:</h2>
    </div>
    <div class="mbd">
    	<p class="so-count">单词统计：<em>0</em></p>
        <div>
        	<textarea></textarea>
            <div class="copyCode"></div>
        </div>
    </div>
    <div class="mft"><a href="javascript:void(0)" class="plBtn">提交答案</a><span class="unPlBtn">提交答案</span></div>
</div>
<script type="text/javascript" src="http://static.100.com/js/jquery/1.8.3/jquery.js?v=201404251401"></script>
<script type="text/javascript">
var cbox={
	init:function(){
		cbox.keyUpBind();
	},
	Bcount:function(str){ //计算单词数
		var i=0,j=0,c=0; 
		var t=/[a-zA-Z]|([+-]?)\d*\.?\d+/; 
		var bo=false; 
		for(i=0,j=i+1;j<=str.length;i=j++){ 
			if(t.test(str.substring(i,j))&&!bo){ 
				bo=true;c++; 
			}else if(!t.test(str.substring(i,j))){ 
				bo=false; 
			} 
		} 
		return c; 
	},
	keyUpBind:function(){ //输入框key事件的绑定
		$('.mod-solution textarea').live('keyup',function(){
			var num=cbox.Bcount($(this).val()),height=$(this).height();
			//if ($(this).val().match(/[\u4e00-\u9fa5]+/)) {
				//alert('请不要不要输入中文哦，亲。');
				//return;
			//}
			if(num>600){
				alert('单词数不能超过600个。');
				return;
			}
			if($(this).val()!=''){
				$('.unPlBtn').hide();
				$('.plBtn').css('display','inline-block');
			}else{
				$('.unPlBtn').css('display','inline-block');
				$('.plBtn').hide();
			}
			$('.so-count em').text(num);			
		});
		$('.mod-solution textarea').live('focus',function(){
			if($(this).val()!=''){
				$('.unPlBtn').hide();
				$('.plBtn').css('display','inline-block');
			}
		})
		$('.mod-solution textarea').live('blur',function(){
			if($(this).val()==''){
				$('.unPlBtn').css('display','inline-block');
				$('.plBtn').hide();
			}
		});
		cbox.autoTextarea({
				'maxHeight':300,
				'obj':'textarea'
			});
	},
	/*文本域输入文字时
	 *文字行数超过文本域高度的时候自动加高文本域高度
	 *到达最大高度的时候出现滚动条
	 *蛋疼的功能
	 */
	autoTextarea:function(mySet){
		var defaults={
			minHeight:$(mySet.obj).height()-10 
		};
		$(mySet.obj).bind("paste cut keydown keyup focus blur",function(){
			
			var opts = $.extend({},defaults,mySet);
			
			//$(this).height((defaults.minHeight) + 'px');
			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';
            }
		});
	}
}

cbox.init();
</script>
</body>
</html>



ps:这个插件可以监听回车键。有空的时候可以copy代码去玩一下。

如果代码不行，请把jQuery.js的链接改成你本地的路径。


Author: Alone
Antroduction: 高级前端开发工程师
Sign: 人生没有失败，只有没到的成功。


联系
我们