在TextArea的AutoSize上调整计算高度，理想情况下工作？ （jsfiddle - 更新）

Question

http://www.jacklmoore.com/autosize/这个textareas的autosize插件非常棒，我想在#append部分使用它：http://jsfiddle.net/45p1pgo6/5/ ..但是现在按'enter'键来打破该行导致#content部分向下移动，因此#footer移出窗口..

如何编辑此javascript以重新计算#appear的高度，以主动调整#content的高度？这样的布局得以维持：#header无论如何都保持可见，＃content与#appear的高度增加平行减小，理想情况下会增加高度，直到#header到达保持粘性的#footer到底部，此时#appear中的textarea将开始滚动..

我测试过尝试编写以下片段，并且它记录了看似准确的高度数字，但是页脚首先离开窗口，然后页脚向上移动（当它应该保持粘到底部时）。当内容大小减小时，页脚在中间好奇地卷起来。http://jsfiddle.net/45p1pgo6/8/

$(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');
    var textareaHeight = $expandTextarea.height(); // 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)"});

  }

});

以下是代码，这是对某些语法的新增内容的扩展：

$("#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

});

Answer 1

首先，您似乎遇到了一些语法错误：

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

  }
});