0

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

我开发了这个：

$(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();
});​

警报每次都会在两个浏览器上正确获取数字。这到底是怎么回事？

4

3 回答 3

3

这是一种似乎有效的方法：

​$('#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 小提琴演示。

于 2012-09-04T18:04:05.603 回答
2

这行不通：

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

简单有效的解决方案。

于 2012-09-04T18:38:42.813 回答
0

I know its too late to answer the thread but you'll get a solution cooked enough :)

I just binded two events on textarea and thats all.

$('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);
});

It will grow your textbox while adding content in it, and also removes extra whitespaces ata the end. Check it out an example and fiddle

于 2013-03-04T09:54:14.570 回答