textarea 자동 성장

       
      
      
      

       
       
       
        1
       
      
      
      
       
      
      
      

       
       
       
        2
       
      
      
      
       
      
      
      

       
       
       
        3
       
      
      
      
       
      
      
      

       
       
       
        4
       
      
      
      
       
      
      
      

       
       
       
        5
       
      
      
      
       
      
      
      

       
       
       
        6
       
      
      
      
       
      
      
      

       
       
       
        7
       
      
      
      
       
      
      
      

       
       
       
        8
       
      
      
      
       
      
      
      

       
       
       
        9
       
      
      
      
       
      
      
      

       
       
       
        10
       
      
      
      
       
      
      
      

       
       
       
        11
       
      
      
      
       
      
      
      

       
       
       
        12
       
      
      
      
       
      
      
      

       
       
       
        13
       
      
      
      
       
      
      
      

       
       
       
        14
       
      
      
      

       
      
      
      

        
       
       
       var textarea = 
        
       
       
       document.getElementById(
        
       
       
       'textarea');
       
      
      
      
       
      
      
      
    
       
      
      
      
       
      
      
      

       
       
       
        textarea.style.overflow = 
        
       
       
       'hidden';
       
      
      
      
       
      
      
      

        
       
       
       var height = 
        
       
       
       parseInt(
        
       
       
       window.getComputedStyle(textarea).height);
       
      
      
      
       
      
      
      

        
       
       
       var width = 
        
       
       
       parseInt(
        
       
       
       window.getComputedStyle(textarea).width);
       
      
      
      
       
      
      
      

       
      
      
      

        
       
       
       var autoHeight = 
        
       
       
       function() {
       
      
      
      
       
      
      
      
    
        
       
       
       if(
        
       
       
       this.scrollHeight <= height || 
        
       
       
       this.value == 
        
       
       
       '') {
       
      
      
      
       
      
      
      
        
        
       
       
       this.style.height=height + 
        
       
       
       '      textarea         ;px';
       
      
      
      
       
      
      
      
        
        
       
       
       return;
       
      
      
      
       
      
      
      

       
       
       
            }
       
      
      
      
       
      
      
      
    
        
       
       
       this.style.height = 
        
       
       
       this.scrollHeight +  
        
       
       
       'px';
       
      
      
      
       
      
      
      

       
       
       
        }
       
      
      
      
       
      
      
      

       
       
       
        textarea.oninput = autoHeight;
       
      
      
      

这个方法就是通过监听textarea的oninput 来实现，也可以监听keyup，keydown；但是如果使用keyup或者keydown来监听的话会存在一个问题，那就是如果textarea有复制或者剪切操作，keyup，keydown不会立即响应内容的变化，并且也不能响应鼠标右键粘贴。

最后再象征性地增加兼容

       
      
      
      

       
       
       
        1
       
      
      
      
       
      
      
      

       
       
       
        2
       
      
      
      
       
      
      
      

       
       
       
        3
       
      
      
      
       
      
      
      

       
       
       
        4
       
      
      
      
       
      
      
      

       
       
       
        5
       
      
      
      
       
      
      
      

       
       
       
        6
       
      
      
      

       
      
      
      

       
       
       
        textarea.onpropertychange = 
        
       
       
       function (event) {
       
      
      
      
       
      
      
      
    
        
       
       
       if(event.propertyName.toLowerCase() == 
        
       
       
       'value') {
       
      
      
      
       
      
      
      

       
       
       
                autoHeight();
       
      
      
      
       
      
      
      
        
        
       
       
       console.log(
        
       
       
       this.value);
       
      
      
      
       
      
      
      

       
       
       
            }
       
      
      
      
       
      
      
      

       
       
       
        }