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

Question

我到处寻找一种方法来垂直扩展文本输入表单，就像他们在现代聊天应用程序中所做的那样。

每个人都说我们应该使用 textarea，因为表单输入不允许多行，但 slack 和 spectrum 正在使用表单...(尽管 discord 使用 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>

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

编辑---

最后，我使用了带有 contenteditable="true"和 overflow:auto 的解决方案；在我的主容器上，并使用 this 作为占位符:

&[placeholder]:empty:not(:focus):before {
    content: attr(placeholder);
}

这成功了。谢谢大家的回答!

Answer 1

你可以有一个 div(没有输入也没有文本区域)并使用 contenteditable="true" 属性:

<div contenteditable="true"></div>

现在当用户点击 div 时，他们可以写东西了!完全像一个输入。所以你只需要监听这个 div 的事件，例如当用户按下 shift+enter 时添加 <br>标记或创建一些段落。

我检查了松弛输入，他们使用了相同的技术。还有一些您可能想要使用的其他属性:

 autocomplete="off" autocorrect="off" spellcheck="true" aria-expanded="false" aria-autocomplete="list" aria-multiline="true" aria-label="Message" dir="auto" contenteditable="true" role="textbox"