jQuery，文本区域调整大小答案

【问题标题】：jQuery, textarea resizejQuery，文本区域调整大小
【发布时间】：2016-09-03 17:58:27
【问题描述】：

所以我有下面的标准文本区域自动增长代码，我已将其更改为绑定输入属性更改以便捕获粘贴。

(function($)
{
    $.fn.autogrow = function(options)
    {
        return this.filter('textarea').each(function()
        {
            var self         = this;
            var $self        = $(self);
            var minHeight    = $self.height();
            var noFlickerPad = $self.hasClass('autogrow-short') ? 0 : parseInt($self.css('lineHeight')) || 0;
            var settings = $.extend({
                preGrowCallback: null,
                postGrowCallback: null
              }, options );

            var shadow = $('<div></div>').css({
                position:    'absolute',
                top:         -10000,
                left:        -10000,
                width:       $self.width(),
                fontSize:    $self.css('fontSize'),
                fontFamily:  $self.css('fontFamily'),
                fontWeight:  $self.css('fontWeight'),
                lineHeight:  $self.css('lineHeight'),
                resize:      'none',
                'word-wrap': 'break-word'
            }).appendTo(document.body);

           $self.bind('input propertychange', function()
            {
                var times = function(string, number)
                {
                    for (var i=0, r=''; i<number; i++) r += string;
                    return r;
                };

                var val = self.value.replace(/&/g, '&amp;')
                                    .replace(/</g, '&lt;')
                                    .replace(/>/g, '&gt;')
                                    .replace(/\n$/, '<br/>&#xa0;')
                                    .replace(/\n/g, '<br/>')
                                    .replace(/ {2,}/g, function(space){ return times('&#xa0;', space.length - 1) + ' ' });

                // Did enter get pressed?  Resize in this keydown event so that the flicker doesn't occur.
                if (event && event.data && event.data.event === 'keydown' && event.keyCode === 13) {
                    val += '<br />';
                }

                shadow.css('width', $self.width());
                shadow.html(val + (noFlickerPad === 0 ? '...' : '')); // Append '...' to resize pre-emptively.

                var newHeight=Math.max(shadow.height() + noFlickerPad, minHeight);
                if(settings.preGrowCallback!=null){
                  newHeight=settings.preGrowCallback($self,shadow,newHeight,minHeight);
                }

                $self.height(newHeight);

                if(settings.postGrowCallback!=null){
                  settings.postGrowCallback($self);
                }
            });
        });
    };
})(jQuery);

我一直试图让初始化时的 textarea 与文本的高度相同。我见过人们使用各种方式，例如

$(this).height(0).height(this.scrollHeight);

这不起作用。我遇到的另一件事是模仿文本区域的 keydown 事件，它肯定会扩展文本区域，但它最终会在文本之后出现很多空白并且太大。

关于如何确保文本区域即使在初始化时也适合文本的任何建议？谢谢。

【问题讨论】：

标签： jquery resize textarea autogrow

【解决方案1】：

参加聚会有点晚了，但因为是 JQuery

$(document).on("input", "textarea", function()
{
    $(this).prop('style').cssText = 'height:auto;';
    $(this).prop('style').cssText = 'height:' + $(this).prop('scrollHeight') + 'px';
});
$(document).ready(function ()
{
    $('textarea').trigger('input');
});

【讨论】：

【解决方案2】：

这是一个功能代码：-

(function($)
{
    $.fn.autogrow = function(options)
    {
        return this.filter('textarea').each(function()
        {
        this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
        }).on('input', function () {
          this.style.height = 'auto';
          this.style.height = (this.scrollHeight) + 'px';
        });
    };
})(jQuery);

scrollHeight 不起作用的问题是 textarea 位于 div 区域中，jQuery 在文档准备就绪时将其设为不可见。这给了一个未定义的scrollHeight。

答案是在加载后 1 秒引入超时以解决该问题，以隐藏 div，一旦 textarea 都已正确调整大小。

【讨论】：