Javascript 在文本区域自动调整大小时调整计算高度，以理想方式工作？（JSFIDLE-更新版）

有一个很棒的自动调整textareas的插件，我想在本文的“出现”部分使用它：……但是现在按“回车”键断行会导致内容部分向下移动，因此页脚会移出窗口

如何编辑此javascript以重新计算显示的高度，从而主动调整内容的高度。。这样可以保持布局：无论发生什么情况，页眉都保持可见，内容的大小随着“显示”高度的增加而减小，理想情况下，高度会增加，直到页眉到达底部仍然粘滞的页脚，此时“显示”中的文本区域将开始滚动

我试着写了下面的代码段，它记录了看似准确的高度数字，但页脚先离开了窗口，然后在应该粘到底的时候向上移动。。当内容在缩小时，页脚好奇地在中间卷起。 下面是代码，这是对..的扩展。我不熟悉某些语法：

$("#view").on("click", "#header", function () {
  var $appear = $('#appear');
  var io = this.io ^= 1; // Toggler

  $appear.show();               // Temporarily show
  var animH = $appear.height(); // Get height and
  if(io) $appear.hide();        // fast hide.

  $('#content').animate({       // Animate content height
      height: (io?"-=":"+=")+animH
    },{
      step: function() {
        $(this).css("overflow-y", "scroll");
      },
      complete : function(){
        var h = 88 + (io?animH:0); // header+footer = 88px
        $(this).css({height: "calc(100% - "+ h +"px)"});
      }
   });

  $appear.slideToggle();        // Now do it with animation

});

---

首先，您似乎有一些语法错误：

$(document).on('keypress', '#expand-textarea', function (e) {
  if (e.keyCode == 13 || e.keyCode == 108) { // when the enter key is pressed

    console.log('keypress of enter on #expand-textarea..');

    var $appear = $('#appear');
    var $content = $('#content');
    var animateHeight = 0;

    var $expandtextarea = $('#expand-textarea');//<--Cant hyphenate variables;
    var textareaHeight = $expandtextarea.height();//<--Missing ';' and cant hyphenate variables
        // get the textarea height
    console.log('textareaHeight = ' + textareaHeight);

    appearHeight = $appear.height();    // to get the height of #appear
    animateHeight = appearHeight + textareaHeight;
    console.log('animateHeight = ' + animateHeight);

    $content.css({height: "calc(100% - "+ animateHeight +"px)"})//<--Missing ';'

  }
});

---

谢谢，但这仍然不起作用。。这些是文章中丢失的打字错误，但实际上在源代码中。为什么在函数中使用expand textarea，而在按键中使用expand textarea？textarea是否在类和id中都设置了expand textarea？@Michael_B yeh这是一个输入错误。。根据修订问题并没有在这里出现：@Michael_B right。。如前所述，是否有方法上传以显示效果？否则，它必须在本地进行测试，才能真正理解问题。@Michael_B再次感谢您对此的想法。。如果有一个解决方案，那就太好了

$(document).on('keypress', '#expand-textarea', function (e) {
  if (e.keyCode == 13 || e.keyCode == 108) { // when the enter key is pressed

    console.log('keypress of enter on #expand-textarea..');

    var $appear = $('#appear');
    var $content = $('#content');
    var animateHeight = 0;

    var $expandtextarea = $('#expand-textarea');//<--Cant hyphenate variables;
    var textareaHeight = $expandtextarea.height();//<--Missing ';' and cant hyphenate variables
        // get the textarea height
    console.log('textareaHeight = ' + textareaHeight);

    appearHeight = $appear.height();    // to get the height of #appear
    animateHeight = appearHeight + textareaHeight;
    console.log('animateHeight = ' + animateHeight);

    $content.css({height: "calc(100% - "+ animateHeight +"px)"})//<--Missing ';'

  }
});