Question

当textarea增加时，可能会降低class =“Content”吗？

$('textarea').on({input: function(){
    var totalHeight = $(this).prop('scrollHeight') - parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
    $(this).css({'height':totalHeight});
}
});

.OuterDiv
{
  width:200px;
  height:300px;
  border:1px solid #000;
  position:relative;
  }
.Content
{
  width:200px;
  max-height:250px;
  background-color:grey;
  overflow:auto;
  }
.text
{
  resize:none;
  position:absolute;
  bottom:0;
  left:0;
  width:194px;
  min-height:43px;
  max-height:145px;
  background-color:rgba(250, 120, 30,1);
  font-size:16px;
  font-family:Arial;
  overflow:auto;
  word-wrap:break-word;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="OuterDiv">
  <div class="Content">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker
   
   </div>
   <textarea class="text" placeholder="Write some text..."></textarea>
 </div>

可以动态增加到高度textarea并且一次减少class =“Content”（在class =“Content”中制作滚动条）

Answer 1

$('textarea').on('input', function() {
    $(this).outerHeight(0); // reset height to reinitialize scrollHeight
    var scrollHeight = parseInt($(this).prop('scrollHeight'));
    $(this).height(scrollHeight);
    $(this).prev('.Content').outerHeight(300 - $(this).outerHeight());
});

https://jsfiddle.net/81vuv33j/

（我已经简化了CSS，因为这个问题似乎有很多不相关的数据。如果我错过了相关内容，请告诉我。）

jQuery文档：

Answer 2

不确定您到底在想什么

据我所知，这就是我能做的事情

检查此代码段

.OuterDiv {
  width: 200px;
  height: 300px;
  border: 1px solid #000;
  position: relative;
  padding: 5px;
  overflow: hidden;
}
.Content {
  width: 200px;
  height: 150px;
  background-color: grey;
  overflow: scroll;
  position: relative;
}
.Content textarea {
  resize: none;
  width: 100%;
  height: 250px;
  background: blue;
}

<div class="OuterDiv">
  <div class="Content">
    <textarea class="text" placeholder="Write some text...">
      this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text
      this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is
      the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text
      this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is
      the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text
      this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is
      the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text
      this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text
    </textarea>

  </div>

希望有所帮助

动态增加textarea并更改位置div

2 个答案: