javascript - 为什么在Chrome中输入更改时，TEXTAREA的scrollHeight错误？

我正在尝试编写JavaScript以自动调整textarea的文本大小。

我的问题是：填充该行之后，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/

这种行为的原因可能是什么？

您知道此任务的其他解决方案/插件吗？

最佳答案

您需要在更改CSS之后而不是之前更新innerHeight。 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);

关于javascript - 为什么在Chrome中输入更改时，TEXTAREA的scrollHeight错误？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26633164/