html - 不使用 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 */
    }

检查代码片段:

.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 顶部和底部有填充。

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