html - Twitter Bootstrap 的 input-prepend 与多行 textarea

Question

我将 Twitter Bootstrap 的input-prepend类与<textarea>. 当我设置<textarea>的行数 = 1 时，一切看起来都很好。但是当我将它设置为任何更大的值时，元素变得大于input-prepend span.

这是演示：http: //jsfiddle.net/2smRF/

如何将span'高度设置为<textarea>'高度？可以仅使用 CSS 实现还是我需要使用 JavaScript？

Answer 1

我认为这仅使用 CSS 不容易实现，所以我为您整理了一个脚本。请注意，如果用户调整 textarea 的大小，它将不起作用。

var onRes = function(){
    $('.input-prepend').each(function(){
        var $textarea = $(this).find('textarea');
        var $span = $(this).find('span.add-on:eq(0)');
        console.log($span);
        $span.height($textarea.outerHeight()-(parseInt($span.css('padding-top'))+parseInt($span.css('padding-bottom'))+parseInt($span.css('margin-top'))+parseInt($span.css('margin-bottom'))+(parseInt($span.css('border-width'))*2)));
    });
};

$(window).resize(onRes);
onRes();

JSFIDDLE