时间:2018-05-17 09:54:32

标签: javascript html css

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

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

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

example image

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

3 个答案:

答案 0 :(得分:3)

除非您更改页面输入的标准实现,否则我认为只使用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内容

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

答案 1 :(得分:0)

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

<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

答案 2 :(得分:-1)

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