Question

这个插件有弹性，

(function (jQuery) {
    jQuery.fn.extend({
        elastic: function () {
            var mimics = ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'fontSize', 'lineHeight', 'fontFamily', 'width', 'fontWeight'];
            return this.each(function () {
                if (this.type != 'textarea') {
                    return false;
                }
                var $textarea = jQuery(this),
                    $twin = jQuery('<div />').css({
                        'position': 'absolute',
                        'display': 'none',
                        'word-wrap': 'break-word'
                    }),
                    lineHeight = parseInt($textarea.css('line-height'), 10) || parseInt($textarea.css('font-size'), '10'),
                    minheight = parseInt($textarea.css('height'), 10) || lineHeight * 3,
                    maxheight = parseInt($textarea.css('max-height'), 10) || Number.MAX_VALUE,
                    goalheight = 0,
                    i = 0;
                if (maxheight < 0) {
                    maxheight = Number.MAX_VALUE;
                }
                $twin.appendTo($textarea.parent());
                var i = mimics.length;
                while (i--) {
                    $twin.css(mimics[i].toString(), $textarea.css(mimics[i].toString()));
                }

                function setHeightAndOverflow(height, overflow) {
                    curratedHeight = Math.floor(parseInt(height, 10));
                    if ($textarea.height() != curratedHeight) {
                        $textarea.css({
                            'height': curratedHeight + 'px',
                            'overflow': overflow
                        });
                    }
                }

                function update() {
                    var textareaContent = $textarea.val().replace(/&/g, '&amp;').replace(/  /g, '&nbsp;').replace(/<|>/g, '&gt;').replace(/\n/g, '<br />');
                    var twinContent = $twin.html();
                    if (textareaContent + '&nbsp;' != twinContent) {
                        $twin.html(textareaContent + '&nbsp;');
                        if (Math.abs($twin.height() + lineHeight - $textarea.height()) > 3) {
                            var goalheight = $twin.height() + lineHeight;
                            if (goalheight >= maxheight) {
                                setHeightAndOverflow(maxheight, 'auto');
                            } else if (goalheight <= minheight) {
                                setHeightAndOverflow(minheight, 'hidden');
                            } else {
                                setHeightAndOverflow(goalheight, 'hidden');
                            }
                        }
                    }
                }
                $textarea.css({
                    'overflow': 'hidden'
                });
                $textarea.keyup(function () {
                    update();
                });
                $textarea.live('input paste', function (e) {
                    setTimeout(update, 250);
                });
                update();
            });
        }
    });
})(jQuery);

它自动将textarea的最小高度设置为32px ..我需要将它设置为20px，任何想法如何？因为这个插件会覆盖css和样式标记。

Answer 1

根据代码中的这一行：

minheight = parseInt($textarea.css('height'), 10) || lineHeight * 3,

minheight由textearea的height或line-height确定，具体取决于哪个。

这意味着要获得20 {x}的min-height，您需要在样式表中将textarea的height设置为20px。

Answer 2

以下调整对我有用

1.将lineHeight设置为零。

2.更改

中输入的数字高度

minheight = parseInt($textarea.css('height'),5) || lineHeight*3

到你想要的高度

快速查看示例：jquery elastic height change

jQuery弹性设置文本框的最小高度

2 个答案: