Создание расширяемого текстового ввода чата с максимальной высотой без 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 с * 1035Атрибут * contentEditable работает и расширяется до определенной высоты.Но текст не центрируется по вертикали (я стараюсь избегать использования Flex, просто чтобы убедиться, что старые браузеры совместимы, хотя и не очень строго)
• Используя textarea, это более семантическое ИМХО, но этоне расширяется автоматически.

Я также хочу обнаружить событие нажатия клавиши (я не думаю, что это проблема в обоих решениях).

Какое решение вы считаетевеб-стандарт?Если оба хороши, как сделать, чтобы div центрировал текст, и уменьшал отступы, когда он растет?Или в случае с textarea, как мне сделать так, чтобы он расширялся без JS?

Также, если у вас есть предложения получше, сообщите мне.

ОБНОВЛЕНИЕ: Я простопонял, насколько грязный вариант (div с 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 с отступом сверху и снизу.

Надеюсь, я правильно понял, чего вы хотите достичь, дайте мне знать, если это поможет.