在没有 JS 的情况下创建具有最大高度的可扩展聊天文本输入

Question

我正在尝试实现以下设计（现在我只是担心文本框）：

输入时：

最大高度： 请注意，顶部和底部填充减少了。

现在，这就是我目前所拥有的：

.chat-wrapper {
  width: 100%;
}

.message-text {
  resize: none;
  box-sizing: border-box;
  height: auto;
  min-height: 41px;
  max-height: 97px;
  width: 387px;
  border: 1px solid #e4e7ec;
  border-radius: 20px;
  background-color: #f9fafb;
  outline: none;
  padding: 0 24px 0 24px;
  overflow: hidden;
}

textarea {
  resize: none;
  box-sizing: border-box;
  height: auto;
  min-height: 41px;
  max-height: 97px;
  width: 387px;
  border: 1px solid #e4e7ec;
  border-radius: 20px;
  background-color: #f9fafb;
  outline: none;
  padding: 0 24px 0 24px;
  overflow: hidden;
}

<div class="chat-wrapper">
  <p>
    Using div with contentEditable:
  </p>
  <div class="message-text" contentEditable></div>
  <br/>
  <p>
    Using regular textarea:
  </p>
  <textarea></textarea>
</div>

现在对于输入文本框，我有两种解决方案：

• 使用 div 和 contentEditable 属性，它可以工作并且可以扩展到一定的高度。但是文本不是垂直居中的（我试图避免使用 Flex，只是为了确保旧浏览器兼容，但不是很严格）
• 使用 textarea，恕我直言，它更具语义，但不会自动扩展。

我还想检测按键事件（我认为这两种解决方案都不是问题）。

您认为哪种解决方案是网络标准？如果两者都很好，如何使 div 居中文本，并在填充时缩小填充？或者是textarea的情况下，没有JS如何让它扩展？

如果你有更好的建议，请告诉我。

更新： 我刚刚意识到这个选项有多么混乱（带有 contentEditable 的 div）： 如您所见，首先，当文本超过宽度时，我无法将文本换行。 其次，div里面的文字，不干净！尤其是复制粘贴的时候。我需要它是纯文本，所以当我使用 JS 获取内容时，我得到的只是文本而不是 html 标签。

Answer 1

我假设您希望保留填充，并且在这种情况下您可以使用 contenteditable 执行类似的操作。

在.message-text 周围添加包装器：

    <div class="chat-wrapper">
      <p>
        Using div with contentEditable:
      </p>
      <div class="message-wrapper">
        <div class="message-text" contentEditable></div>
      </div>
    </div>

更新 CSS：

    .chat-wrapper {
      width: 100%;
    }

    .message-text {
      min-height: 1em; /* prevent height collapsing when there is no text */
      max-height: 97px;
      width: 100%;
      align-content: center;
      outline: none;
      overflow: hidden;
    }

    .message-wrapper {
      width: 387px;
      border: 1px solid #e4e7ec;
      border-radius: 20px;
      background-color: #f9fafb;
      padding: 24px; /* the container will keep the padding untouched */
      max-height: 145px; /* added padding to the height of the .message-text */
    }

检查sn-p：

.chat-wrapper {
  width: 100%;
}

.message-text {
  min-height: 1em; /* prevent height collapsing when there is no text */
  max-height: 97px;
  width: 100%;
  align-content: center;
  outline: none;
  overflow: hidden;
}

.message-wrapper {
  width: 387px;
  border: 1px solid #e4e7ec;
  border-radius: 20px;
  background-color: #f9fafb;
  padding: 24px; /* the container will keep the padding untouched */
  max-height: 145px; /* added padding to the height of the .message-text */
}

textarea {
  resize: none;
  box-sizing: border-box;
  height: auto;
  min-height: 41px;
  max-height: 97px;
  width: 387px;
  border: 1px solid #e4e7ec;
  border-radius: 20px;
  background-color: #f9fafb;
  outline: none;
  padding: 0 24px 0 24px;
  overflow: hidden;
}

<div class="chat-wrapper">
  <p>
    Using div with contentEditable:
  </p>
  <div class="message-wrapper">
  <div class="message-text" contentEditable></div>
</div>
  <br/>
  <p>
    Using regular textarea:
  </p>
  <textarea></textarea>
</div>

.message-wrapper 的max-height: 145px 实际上是内容框的高度，这有助于推动.message-text 从顶部和底部填充。

我希望我对您想要实现的目标有正确的想法，如果这有帮助，请告诉我。