在某个项目里面，有这样的一个小需求。
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: 人生没有失败，只有没到的成功。
不积跬步无以至千里----高度自适应的textarea,布布扣,bubuko.com
时间： 2024-10-10 23:44:22