如何制作可扩展的聊天输入表单

Question

我一直在寻找一种方法来像在现代聊天应用程序中一样垂直扩展文本输入表单。

每个人都说我们应该使用textarea，因为表单输入不允许多行，但是松弛和频谱正在使用表单...（但不协调时使用text-area）

我想从一行开始，当用户输入换行符（Shift + Enter）时，输入将扩展到顶部。

.chat-footer {

  display: grid;

  grid-template-rows: 90vh max-content;

  height: 100%;

  background-color: var(--color-i-bg);

  grid-area: i;

  border-top: 1px solid #ddd;

  border-top: var(--color-i-border-top);

  padding-bottom: 1rem;

}

.chat-footer__form {

  align-self: end;

  display: grid;

  grid-row: 2 / 3;

  grid-template-columns: 1fr max-content;

  width: 100%;

  height: 100%;

  vertical-align: middle;

  white-space: normal;

  background: none;

  line-height: 1;

}

.chat-footer__form::placeholder {

  color: lightgrey;

  font-size: 1em;

}

.chat-footer__form-container-input {

  grid-column: 1/2;

}

.chat-footer__form-container-btn {

  grid-column: 2/3;

}

.chat-footer__form-input {

  width: 100%;

  height: 100%;

}

.chat-footer__form * > button {

  background-color: inherit;

  border: 0;

  line-height: normal;

}

.chat-footer__form * > button:hover {

  cursor: pointer;

}

.chat-footer__form * > button:focus, .chat-footer__form * > button:active {

  outline: 0;

}

 <div class="chat-footer">

        <form class="chat-footer__form" role="form">

            <div class="chat-footer__form-container-input">

                <input type="text" class="chat-footer__form-input" placeholder="New message">

            </div>

            <div class="chat-footer__form-container-btn">

                <button class="chat-footer__form-btn" id="form-attach">Attach</button>

                <button class="chat-footer__form-btn" id="form-smiley">Smiley</button>

            </div>

        </form>

    </div>

我不反对使用文本区域，如果它是一个更好的解决方案。

Answer 1

您可以有一个div（无输入，无文本区域）并使用contenteditable="true"属性：<div&nbsp;contenteditable="true"></div>现在，当用户单击div时，他们可以编写东西！就像输入一样。因此，您只需要侦听此div的事件，例如，当用户按下时shift+enter添加<br>标签或创建一些段落。我检查了松弛输入，他们使用了相同的技术。您可能还需要使用其他一些属性：&nbsp;autocomplete="off"&nbsp;autocorrect="off"&nbsp;spellcheck="true"&nbsp;aria-expanded="false"&nbsp;aria-autocomplete="list"&nbsp;aria-multiline="true"&nbsp;aria-label="Message"&nbsp;dir="auto"&nbsp;contenteditable="true"&nbsp;role="textbox"