创建具有最大高度但没有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，只是为了确保旧的浏览器兼容，但不是很严格）
• 使用textarea，它更具语义恕我直言，但它不会自动扩展。

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

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

如果您有任何更好的建议，请告诉我。

更新：我刚刚意识到选项有多乱（div with contentEditable）：正如你所看到的，首先我不能在文本超过宽度时将文本换行。二，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。

我希望我对你想要达到的目标有了正确的认识，如果这有帮助，请告诉我。