创建无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>

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

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

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

您认为哪种解决方案是网络标准？如果两者都很好，如何使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 */
    }

检查代码段：

.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>

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

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