保持等高文本区域和按钮

Question

我希望在加载时设置两个文本区域和中间按钮的高度相等，然后在整个手动调整大小时保持它们的高度同步。我想要纯查询替代方案。作为奖励，自动 expand/contract 会很好，因为文本是 entered/removed，再次保持其他文本区域和按钮同步。谢谢。

$(document).ready(function(){

});

#c, #d {
width: 40%;
resize:vertical;
min-height:100px;
max-height:500px;
vertical-align:top;
}

#bo {
    width: 10%;
    vertical-align:top;
}

#content {
    width: 100%;
}

<body>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"><textarea id="c">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta recusandae animi dignissimos natus obcaecati error eveniet, repellendus tempora. Illum sint veniam impedit eaque nesciunt ipsam! Unde tempore nihil qui possimus?
Illum similique sequi quisquam nemo libero magni velit, aliquid esse perspiciatis. Sapiente ipsum voluptatem blanditiis animi dicta facilis, nesciunt, velit magnam pariatur consectetur eius voluptatibus praesentium asperiores veritatis dolor nihil?
Rem, veniam? Consectetur, odit at. Obcaecati aspernatur est quibusdam rem, vel ut deserunt nihil ex libero itaque pariatur adipisci cum magni dolores tempore nisi placeat ab aut culpa. Iure, fugit!
Ab, culpa deleniti? Beatae minima, debitis ea dolore hic praesentium minus obcaecati expedita iusto non, voluptatem ipsa cupiditate eligendi perspiciatis doloremque atque odio cum, cumque ipsam incidunt maxime. Architecto, perferendis.
</textarea><button id="bo">&lt&lt</button><textarea id="d"></textarea></div>
</body>
</html>

根据 Rick Hitchcock 的回答，我成功了。我最初的要求不够详细。他的回答让我在下面找到了我想要的内容。

  $('#content #c').on('input', function() {
    $('#content #c')
      .height(0) /* 0 to allow shrinking */
      .height($('#c').prop('scrollHeight')
             );
  }).trigger('input');

#content {
display: flex;
}

#c,
#d {
  width: 45%;
  resize: none;
  min-height: 100px;
  max-height: 500px;
  vertical-align: top;
  overflow: hidden /* no scrollbars ie*/
}

#d {
  readOnly: true;
  background-color: LightGrey;
  outline: none;
  overflow-y: scroll;
}

textarea {
  padding: 0;
  margin: 0;
}

#bo {
  width: 10%;
  vertical-align: top;
}

#content {
  width: 100%;
}

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"><textarea id="c">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta recusandae animi dignissimos natus obcaecati error eveniet, repellendus tempora. Illum sint veniam impedit eaque nesciunt ipsam! Unde tempore nihil qui possimus?
Illum similique sequi quisquam nemo libero magni velit, aliquid esse perspiciatis. Sapiente ipsum voluptatem blanditiis animi dicta facilis, nesciunt, velit magnam pariatur consectetur eius voluptatibus praesentium asperiores veritatis dolor nihil?
Rem, veniam? Consectetur, odit at. Obcaecati aspernatur est quibusdam rem, vel ut deserunt nihil ex libero itaque pariatur adipisci cum magni dolores tempore nisi placeat ab aut culpa. Iure, fugit!
Ab, culpa deleniti? Beatae minima, debitis ea dolore hic praesentium minus obcaecati expedita iusto non, voluptatem ipsa cupiditate eligendi perspiciatis doloremque atque odio cum, cumque ipsam incidunt maxime. Architecto, perferendis.
</textarea><button id="bo">&lt&lt</button><textarea id="d" readonly>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta recusandae animi dignissimos natus obcaecati error eveniet, repellendus tempora. Illum sint veniam impedit eaque nesciunt ipsam! Unde tempore nihil qui possimus?
Illum similique sequi quisquam nemo libero magni velit, aliquid esse perspiciatis. Sapiente ipsum voluptatem blanditiis animi dicta facilis, nesciunt, velit magnam pariatur consectetur eius voluptatibus praesentium asperiores veritatis dolor nihil?
Rem, veniam? Consectetur, odit at. Obcaecati aspernatur est quibusdam rem, vel ut deserunt nihil ex libero itaque pariatur adipisci cum magni dolores tempore nisi placeat ab aut culpa. Iure, fugit!
Ab, culpa deleniti? Beatae minima, debitis ea dolore hic praesentium minus obcaecati expedita iusto non, voluptatem ipsa cupiditate eligendi perspiciatis doloremque atque odio cum, cumque ipsam incidunt maxime. Architecto, perferendis.ds
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta recusandae animi dignissimos natus obcaecati error eveniet, repellendus tempora. Illum sint veniam impedit eaque nesciunt ipsam! Unde tempore nihil qui possimus?
Illum similique sequi quisquam nemo libero magni velit, aliquid esse perspiciatis. Sapiente ipsum voluptatem blanditiis animi dicta facilis, nesciunt, velit magnam pariatur consectetur eius voluptatibus praesentium asperiores veritatis dolor nihil?
Rem, veniam? Consectetur, odit at. Obcaecati aspernatur est quibusdam rem, vel ut deserunt nihil ex libero itaque pariatur adipisci cum magni dolores tempore nisi placeat ab aut culpa. Iure, fugit!
Ab, culpa deleniti? Beatae minima, debitis ea dolore hic praesentium minus obcaecati expedita iusto non, voluptatem ipsa cupiditate eligendi perspiciatis doloremque atque odio cum, cumque ipsam incidunt maxime. Architecto, perferendis.ds
</textarea></div>
</body>

Answer 1

使 content 成为弹性框，因此其所有 children 高度相同：

#content {
  display: flex;
}

编辑文本区域时，将两个文本区域的高度都设置为 0 以获得滚动条，然后将它们的高度都设置为滚动高度的最大值：

  $('#content textarea').on('input', function() {
    $('#content textarea')
      .height(0)
      .height(Math.max($('#c').prop('scrollHeight'),
                       $('#d').prop('scrollHeight')
                      )
             );
  }).trigger('input');

片段：

$(document).ready(function() {
  $('#content textarea').on('input', function() {
    $('#content textarea')
      .height(0)
      .height(Math.max($('#c').prop('scrollHeight'),
                       $('#d').prop('scrollHeight')
                      )
             );
  }).trigger('input');
});

#c,
#d {
  width: 40%;
  resize: vertical;
  min-height: 100px;
  max-height: 500px;
  vertical-align: top;
}

#bo {
  width: 10%;
  vertical-align: top;
}

#content {
  width: 100%;
  display: flex;
}

<body>
  <html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div id="content">
    <textarea id="c">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta recusandae animi dignissimos natus obcaecati error eveniet, repellendus tempora. Illum sint veniam impedit eaque nesciunt ipsam! Unde tempore nihil qui possimus?</textarea>
    <button id="bo">&lt&lt</button>
    <textarea id="d"></textarea>
  </div>
</body>

</html>

Answer 2

希望这会在最少的行中为您完成这两件事使用 autosize 自动调整大小并使用事件 autosize:resized 保持另一个 textarea 高度同步。

$(document).ready(function() {
  autosize(document.querySelectorAll('textarea#c'));

  $("#c").on('autosize:resized', function() {
    $("#d").height($("#c").outerHeight());
  });
  $("#d").height($("#c").outerHeight());

});

#c,
#d {
  width: 40%;
  resize: vertical;
  min-height: 100px;
  max-height: 500px;
  vertical-align: top;
}

textarea {
  padding: 0;
  margin: 0;
}

#bo {
  width: 10%;
  vertical-align: top;
}

#content {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/autosize@4.0.0/dist/autosize.min.js"></script>

<div id="content">
  <textarea id="c">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta recusandae animi dignissimos natus obcaecati error eveniet, repellendus tempora. Illum sint veniam impedit eaque nesciunt ipsam! Unde tempore nihil qui possimus?
Illum similique sequi quisquam nemo libero magni velit, aliquid esse perspiciatis. Sapiente ipsum voluptatem blanditiis animi dicta facilis, nesciunt, velit magnam pariatur consectetur eius voluptatibus praesentium asperiores veritatis dolor nihil?
Rem, veniam? Consectetur, odit at. Obcaecati aspernatur est quibusdam rem, vel ut deserunt nihil ex libero itaque pariatur adipisci cum magni dolores tempore nisi placeat ab aut culpa. Iure, fugit!
Ab, culpa deleniti? Beatae minima, debitis ea dolore hic praesentium minus obcaecati expedita iusto non, voluptatem ipsa cupiditate eligendi perspiciatis doloremque atque odio cum, cumque ipsam incidunt maxime. Architecto, perferendis.
</textarea>
  <button id="bo">&lt&lt</button>
  <textarea id="d"></textarea></div>

保持等高文本区域和按钮

Keep equal height textareas and buttons

html

jquery

events

textarea

resize