爲什麼Chrome上的輸入變化時，TEXTAREA會出現錯誤的scrollHeight？

Question

我正在嘗試編寫一個用於自動調整textarea文本大小的JavaScript。

我的問題是：行被填充後，scrollHeight會在每個第二個符號上返回錯誤的值（您可以在控制檯中看到日誌輸出）。

textarea的高度是47，我交替地62和47（並沒有調整大小）。

jQuery插件：

; (function($) { 
/** 
* Resizes the text in the textarea 
* @version 0.1 
*/ 
$.fn.textResizer = function(options) { 

    options = jQuery.extend({ 
     maxFontSize: null, 
     minFontSize: 8, 
     step: 1 
    }, options); 

    return this.each(function() { 
     var maxHeight = $(this).outerHeight(); 
     $(this).bind('input propertychange', function() { 

      var innerElements = $(this).children(':visible'); 
      console.log($(innerElements)); 

      var fontSize = options.maxFontSize, 
       innerHeight; 

      console.log('inner: '+$(this).css("height")+ ', max: '+maxHeight, 'outer: '+$(this).outerHeight()); 
      console.log(this.scrollHeight); 
      do { 

       innerHeight = this.scrollHeight; 
       console.log(this.scrollHeight); 

       fontSize = fontSize - options.step; 
       $(this).css('font-size', fontSize); 

      } while ((innerHeight > maxHeight) && fontSize > options.minFontSize); 
     }); 
    }); 

}; 

})(jQuery); 

CSS：

textarea { 
    position: absolute; 
    width:176px; 
    height:47px; 
    top: 4px; 
    left: 60px; 
    background: #666666; 
    border: none; 
    color: #fff; 
    overflow: hidden; 
    display:inline-block; 
    vertical-align: middle; 
    resize: none; 
    padding: 0; 
    } 

HTML：

<script> 
$(document).ready(function() { 
    $('textarea').textResizer({'maxFontSize':30}); 
}); 
</script> 

<textarea></textarea> 

這是我的例子： http://jsfiddle.net/6nhLmcge/

w ^帽子可以成爲這種行爲的原因？

你知道這個任務的其他解決方案/插件嗎？

Answer 1

你需要更新innerHeight後更改CSS，而不是之前。 http://jsfiddle.net/svt8zsx4/

  do { 

       //innerHeight = $(this).innerHeight(); 
       console.log(this.scrollHeight); 

       fontSize = fontSize - options.step; 
       $(this).css('font-size', fontSize); 
       innerHeight = this.scrollHeight; 

      } while ((innerHeight > maxHeight) && fontSize > options.minFontSize);