简单的jQuery textarea的扩展，以适应内容(Simple jQuery textarea

在我试图建立一个简单的跨浏览器中展开文本区，我发现所有的插件缝太过分杂乱。

我开发了这个：

$(document).ready(function() {
    $('textarea').keyup(function() {
        var txtheight = this.scrollHeight;
        $(this).height(txtheight)
    });
    $('textarea').keyup();
});​

它产生意想不到的效果。

在Firefox它工作，但如果我从textarea的删除线它的尺寸不会减少。

在Chrome添加任何按键导致另一行高度presseing。

因为如果不是我的代码更改为这，这是非常令人困惑：

$(document).ready(function() {
    $('textarea').keyup(function() {
        var txtheight = this.scrollHeight;
       alert(txtheight); 
    });
    $('textarea').keyup();
});​

警报沾到两种浏览次数正确的每一次。 这到底是怎么回事？

Answer 1:

这里有一个方法，似乎工作：

​$('#test').on('keydown', function(e){
    var that = $(this);
    if (that.scrollTop()) {
        $(this).height(function(i,h){
            return h + 20;
        });
    }
});​​​​​​​​

JS提琴演示 。

修订以上，在一个稍微复杂的方式但是，我认为，正确的准确性：

function heightComparison(el) {
    if (!el) {
        return false;
    }
    else {
        var $el = $(el),
            clone = $('#' + el.id + '-clone'),
            cH = clone.height();

        $el.height(cH);

    }
}

$('#test').on('keyup paste', function(e) {
    var that = this,
        $that = $(that),
        clone = $('#' + that.id + '-clone').length ? $('#' + that.id + '-clone') : $('<div />', {
            'id': that.id + '-clone'
        }).css({
            'position': 'absolute',
            'left': '-1000px',
            'border-width': '1px',
            'border-color': '#000',
            'border-style': 'solid',
            'overflow': 'hidden',
            'width': $that.width(),
            'min-height': $that.height(),
            'padding': $that.css('padding'),
            'font-size': $that.css('font-size'),
            'font-family': $that.css('font-family')
        }).appendTo('body');

    clone.text($that.val());

    heightComparison(that);
});​

JS提琴演示 。

Answer 2:

这是不是工作：

$(document).ready(function() {
    $('textarea').keyup(function() {
       var txtheight = $(this).scrollTop();
       $(this).css('height',($(this).height() + txtheight) + 'px')
    });
    $('textarea').keyup();
});

简单有效的解决方案。

Answer 3:

我知道它来不及回答的线程，但你会得到一个解决方案熟足够:)

我只是绑定两个事件textarea和多数民众赞成。

$('textarea').keypress(function (e) {
  // check if user pressed 'Enter'
  if(e.which == 13) 
  {
   // get control object to modify further
   var control = e.target;

    // get existing 'Height' of pressed control
   var controlHeight = $(control).height();

   //add some height to existing height of control, I chose 17 as my line-height was 17 for the control 
   $(control).height(controlHeight+17);
  }
});

$('textarea').blur(function (e) {

    // Here we get exact number of lines in our TextArea
    var textLines = $(this).val().trim().split(/\r*\n/).length; 

    // Now apply the number Of Lines * line-height to your control. That's all.
    $(this).val($(this).val().trim()).height(textLines*17);
});

它会增加你的文本框，而在其添加的内容，并且还删除多余空格ATA结束。 检查出来的例子，小提琴

文章来源: Simple jQuery textarea expand to fit content