在TextArea的自动大小上调整计算高度，理想地工作吗?(jsfiddle - updated)

Resize Calculated Height on AutoSize of TextArea, to work ideally? (jsfiddle - updated)

本文关键字：工作 理想 updated jsfiddle 高度 TextArea 计算 调整      更新时间：2023-09-26

有这个伟大的自动大小插件的文本区域http://www.jacklmoore.com/autosize/和我想使用它的#appear部分:http://jsfiddle.net/45p1pgo6/5/..但是现在按回车键换行会导致#content部分向下移动，这样#footer就会移出窗口…

我如何编辑这个javascript重新计算#出现的高度，积极调整#内容的高度?．．这样可以保持布局:#header无论如何都是可见的，#content的大小随着#appear的高度增加而减小，理想情况下，#header的高度会随着#footer的高度增加而增加，直到#header到达保持粘在底部的#footer，此时#appear中的文本区域将开始滚动。

我试着写了下面的代码片段，它记录的高度似乎是准确的数字，但是页脚首先离开了窗口，然后页脚向上移动(当它应该保持粘在底部时)。当内容变小的时候，页脚奇怪的出现在中间…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
});

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

$(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 ';'
  }
});
相关文章：