Question

对于我正在开发的界面，我有一个功能，但我不完全确定如何实现它。我基本上在输入字段后面有一组按钮，在输入中插入一个span /按钮来表示单击的按钮。

因此，在我的想象界面的简化版本中，我可以正常输入字段，但是当我按下其中一个按钮时，它们也会在字段中插入文本。假设我按下按钮1，它会插入文本“Hello”，按钮2会插入文本“Emma”。相当容易。

我想要创建的更复杂版本的工作方式类似，但是当我单击按钮1时，它会在文本字段中插入一个气泡。气泡有自己的背景颜色，包含单词“Hello”并在右上角有一个小x来消除它。当插入气泡时，它会移动克拉经过插入的气泡，我可以继续正常输入。如果我在克拉位于气泡右侧时按下退格键，它会立即删除整个气泡。这是一个简单的示例图片：

我觉得我在互联网上看到了很多这样的东西，但我无法弄清楚它是如何完成的。有没有办法用输入字段来解决这个问题？如果不可能我应该研究哪些替代方案？

Answer 1

除非您更改页面输入的标准实现，否则我认为只使用input即可完成此操作：）

我认为你最好的选择是拥有这样的结构：

<div class="wrapper">
  <div class="shownContent">Is that <div class="tag">Emma</div></div>
  <input class="underlyingInput"/>
  <div class="tagsButtons" />
</div>

• undelyingInput被隐藏 - 可用但隐藏。
• 样式shownContent看起来像输入。
• 然后，您处理点击shownContent：如果他们点击显示的内容，请关注隐藏的基础输入，但是将shownContent显示为焦点。
• 现在，如果用户在点击shownContent后开始撰写，那么该文字实际上是进入输入的！
• 当输入值发生变化时，使用新值将其解析为文本和标记，并设置shownContent
的html内容

完成此操作后，从左侧点击中删除标记并从右侧点击添加标记应该很简单。

Answer 2

您可以尝试使用一系列输入，而不只是一个：

<div class="wrapper">
  <input /> <!-- "Is that " -->
  <button>Emma</button>
  <input /> <!-- "? " -->
  <button>Hello</button>
  <input /> <!-- ", " -->
  <button>Emma</button>
  <input /> <!-- "!" -->
</div>

包装器仅用于样式目的：您为其指定边框并使input元素无边框。

您需要覆盖input元素上的大量键盘命令。例如，在最后input开头的退格将导致删除前一个按钮，并合并两个相邻input元素的内容。

您还需要考虑点击Home和End键（以及其他操作系统中的等效键）的效果。

此外，您还需要确保input元素会随着内容的更改而调整大小。这有点棘手，但可行！

这是一个跳跃点：https://codepen.io/exonj/pen/jxQxGV

Answer 3

这是一个标签输入。结帐这个 Bootstrap TagsInput。它具有您想要的相同功能。