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

最新推荐文章于 2024-09-14 18:52:56 发布

Goluck98

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量871

点赞数

分类专栏： java jQuery javaWeb 文章标签： javascript

本文链接：https://blog.csdn.net/Goluck98/article/details/38690945

版权

java jQuery 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

javaWeb

2 篇文章 0 订阅

订阅专栏

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

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

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

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

[html]view plaincopy 
   
 <!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>  