简单jQuery文本区域展开以适应内容

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

我开发了这个：

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

它正在产生意想不到的结果

在FIREFOX上，它可以工作，但如果我从文本区域删除行，它的大小不会减小

在CHROME上，按任意键都会增加另一行的高度

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

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

---

该警报在两种浏览器上每次都会获得正确的数字。到底发生了什么事？

这里有一种方法似乎有效：

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

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

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

功能高度比较（el）{
如果（！el）{
返回false；
}
否则{
变量$el=$（el），
克隆=$（'#'+el.id+'-clone'），
cH=clone.height（）；
$el.高度（cH）；
}
}
$（'#test'）。在（'keyup paste'，函数（e）上{
var=这个，
$that=$（that），
clone=$（'#'+that.id+'-clone'）。长度？$（'#'+that.id+'-clone'）：$（''{
'id'：that.id+'-clone'
}).css({
'位置'：'绝对'，
'左'：'-1000px'，
“边框宽度”：“1px”，
“边框颜色”：“000”，
“边框样式”：“实心”，
“溢出”：“隐藏”，
'width'：$that.width（），
“最小高度”：$that.height（），
'padding'：$that.css（'padding'），
“font-size”：$that.css（'font-size'），
'font-family'：$that.css（'font-family'））
}).附于（“主体”）；
clone.text（$that.val（））；
高度比较；
});​

---

.

以下是一种似乎有效的方法：

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

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

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

功能高度比较（el）{
如果（！el）{
返回false；
}
否则{
变量$el=$（el），
克隆=$（'#'+el.id+'-clone'），
cH=clone.height（）；
$el.高度（cH）；
}
}
$（'#test'）。在（'keyup paste'，函数（e）上{
var=这个，
$that=$（that），
clone=$（'#'+that.id+'-clone'）。长度？$（'#'+that.id+'-clone'）：$（''{
'id'：that.id+'-clone'
}).css({
'位置'：'绝对'，
'左'：'-1000px'，
“边框宽度”：“1px”，
“边框颜色”：“000”，
“边框样式”：“实心”，
“溢出”：“隐藏”，
'width'：$that.width（），
“最小高度”：$that.height（），
'padding'：$that.css（'padding'），
“font-size”：$that.css（'font-size'），
'font-family'：$that.css（'font-family'））
}).附于（“主体”）；
clone.text（$that.val（））；
高度比较；
});​

.

这不起作用：

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

简单有效的解决方案。

这不起作用：

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

---

简单有效的解决方案。

我知道现在回答这个问题已经太迟了，但你会得到一个足够成熟的解决方案：）

我刚刚在

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

---

它将在文本框中添加内容的同时增加文本框的大小，并在最后删除额外的空白。看看吧，一个

我知道现在回答这个问题已经太晚了，但你会得到一个足够成熟的解决方案：）

我刚刚在

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

---

它将在文本框中添加内容的同时增加文本框的大小，并在最后删除额外的空白。查看一个

当页面/div第一次加载数据时会怎么样？如果用户拷贝粘贴了一些大文本？是否也要涵盖这些情况？当页面/div第一次加载数据时会发生什么情况？如果用户拷贝粘贴了一些大文本？您想也涵盖这些情况吗？有两件事-检查

.scrollTop（）>0

。以及回调到

height（）

！我希望我能投票两次！！直到今天，我一直在做

el.height（el.height（）+n）

链接本身不起作用（您无法访问JS Fiddle），或者在该链接（JS Fiddle）上找到的示例代码不起作用？@DavidThomas：只是为了好玩，我使用了

getComputedStyle

来查找增量高度，而不是假设

20

@DavidThomas，但是有更简单的方法让它以更少的代码工作，所以使用这些方法之一。我发现我的方法是有效的，它既增加了

textarea

的高度，也减少了

的高度。大多数
css（）
都可以移动到实际的样式表中，因此可以简化，这将使jQuery更加简洁。以及回调到
height（）
！我希望我能投票两次！！直到今天，我一直在做
el.height（el.height（）+n）
链接本身不起作用（您无法访问JS Fiddle），或者在该链接（JS Fiddle）上找到的示例代码不起作用？@DavidThomas：只是为了好玩，我使用了
getComputedStyle
来查找增量高度，而不是假设
20
@DavidThomas，但是有更简单的方法让它以更少的代码工作，所以使用这些方法之一。我发现我的方法是有效的，它既增加了
textarea
的高度，也减少了
的高度。大多数
css（）
都可以移动到实际的样式表中，因此可以简化，这将使jQuery更加简洁。