如何防止调整大小的TextArea溢出页面？

Posted 2023-03-05

【中文标题】如何防止调整大小的TextArea溢出页面？

【英文标题】：How to prevent a TextArea that resizes from overflowing the page?

【发布时间】：2018-07-18 08:42:18

【问题描述】：

我正在创建一个在页面中水平和垂直居中的 TextArea。鉴于我需要将 TextArea 垂直居中，我不能让 textarea 为 100w 和 100h，我需要它从一个小的高度开始，然后随着用户键入而增长。我还需要一个单击捕获器，因此如果用户单击 textarea 周围的区域，则 textarea 会聚焦。 （灰色的 bkg 仅用于调试目的）

我在这里有一个关于 CodePen 的演示：https://codepen.io/anon/pen/OQbvxa

autosize(document.getElementById("note"));

$( ".textAreaClickCapturer" ).mouseup(function() 
  $( "#note" ).focus();
);

html, body 
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;

.page-body.fullScreen 
  display: flex;
  flex: 1 1;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: #EFEFEF;
  text-align: left;
  padding: 0!important;
  align-items: normal;
  justify-content: normal;


form 
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;


form .textAreaClickCapturer 
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  align-items: center


form .field 
  width: 100%;
  margin: 0;
  padding: 24px;
  clear: both;
  max-height: max-content;
  height: 100%;
  align-items: center;


textarea 
  border: none;
  border-radius: 0;
  font-size: 21px;
  line-height: 28px;
  padding: 0;
  vertical-align: top;
  width: 100%;
  text-align: center;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<div class="page-body fullScreen ">
  <form action="/">
    <div class="textAreaClickCapturer" role="presentation">
      <div class="field">
        <textarea id="note" placeholder="Say something..." rows="3"></textarea>
      </div>
    </div>
  </form>
</div>

当您输入多行时，TextArea 确实会很好地增长，但最终，TextArea 会增长到超过屏幕的大小，导致屏幕中断。

我怎样才能让 TextArea 增长到 TextArea 不会出现在页面后面并中断但有一个工作溢出来处理大量文本的地方？

所需的初始经验

当文本区域超过周围的 div 时，UI 损坏。

谢谢！

【参考方案1】：

主要原因是当使用align-items: center 和/或justify-content: center 时，元素会在顶部/底部溢出其父元素。

要解决这个问题，需要使用自动边距，这样就可以控制垂直和水平、上/下、左/右等对齐方式。

您的代码中还有很多 height: 100%（我已清理），并且与 Flexbox 结合使用会导致更多问题，因此请改用 Flexbox 自己的属性，例如这里 flex: 1 在 flex 列项目上，这将填充父级的高度。

还添加了min-height: 0，以便 Firefox 一起玩。

Updated codepen

堆栈sn-p

autosize(document.getElementById("note"));

$( ".textAreaClickCapturer" ).mouseup(function() 
  $( "#note" ).focus();
);

html,
body 
  margin: 0;
  height: 100%;

body 
  display: flex;
  flex-direction: column;

.page-body.fullScreen 
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #efefef;
  min-height: 0;


form 
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;


form .textAreaClickCapturer 
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;


form .field 
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 24px;


textarea 
  border: none;
  border-radius: 0;
  font-size: 21px;
  padding: 0;
  width: 90%;
  text-align: center;
  overflow: auto;
  margin: auto;

<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-body fullScreen ">
  <form action="/">
    <div class="textAreaClickCapturer" role="presentation">
      <div class="field">
        <textarea id="note" placeholder="Say something..." rows="3"></textarea>
      </div>
    </div>
  </form>
</div>

【参考方案2】：

我认为你可以使用max-width 和max-height：

textarea 
  ...
  max-width: 100%;
  max-height: 100%;

更新

我简化了 HTML 和 CSS，sn-p：

autosize(document.getElementById("note"));
$(".textAreaClickCapturer").mouseup(function() 
  $("#note").focus();
);

html, body, form 
  height: 100%;


body 
  background: #efefef;
  margin: 0;


form 
  display: flex;
  align-items: center; /*center vertically*/
  padding: 24px;
  box-sizing: border-box;


textarea 
  font-size: 20px;
  text-align: center;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>

<form class="textAreaClickCapturer" action="/">
  <textarea id="note" placeholder="Say something..." rows="3"></textarea>
</form>

【参考方案3】：

我在您的笔中尝试了以下操作：

在 CSS 的 textarea 选择器中，添加：

max-height: 90%; overflow: auto;

如果输入的内容超过最大高度，这会给你一个滚动条，并且最大高度由包含 div 的大小控制。

【参考方案4】：

添加一个最大高度，就像其他人所说的那样，就我个人而言，在与您的情况相关的高度时，我更喜欢使用 vh。所以在你的笔里它只是：

textarea 
  border: none;
  border-radius: 0;
  font-size: 21px;
  line-height: 28px;
  padding: 0;
  vertical-align: top;
  width: 100%;
  text-align: center;
  max-height:50vh;

然后你就被摆平了。默认情况下，您的垂直溢出是滚动的，因此您实际上无需再做任何事情。