Question

在我尝试构建一个简单的跨浏览器扩展文本区域的过程中，我发现所有插件都过于混乱。

我开发了这个：

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

它产生了意想不到的结果。

在FIREFOX上它正在工作，但是如果我从textarea删除行，它的大小不会减小。

在CHROME上，任何键的预设都会导致添加另一个行高。

这非常令人困惑，因为相反，我将代码更改为：

$(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 Fiddle demo

以稍微复杂的方式对上述内容进行了修改，但我认为，正确的准确性：

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 Fiddle demo

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);
});

在添加内容时会增加文本框，并在最后删除额外的空格。看看 example and fiddle

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

3 个答案: