javascript - 内部带有按钮或跨度的输入字段

Question

我想为我正在开发的界面设计一个功能，但我不确定如何实现它。我基本上是在一个输入字段之后，旁边有一组按钮，在输入中插入一个跨度/按钮来表示单击的按钮。

因此，在我想象的界面的简化版本中，我可以像往常一样在字段中输入内容，但是当我按下其中一个按钮到侧面时，它们也会将文本插入字段中。比方说，如果我按下按钮 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内容

完成后，从左侧的点击中删除标签并从右侧的点击中添加标签应该很简单。