在某个项目里面,有这样的一个小需求。
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>
demo地址:http://jsbin.com/voqorecu/1/edit
ps:这个插件可以监听回车键。有空的时候可以copy代码去玩一下。
如果代码不行,请把jQuery.js的链接改成你本地的路径。