对于我正在开发的界面,我有一个功能,但我不完全确定如何实现它。我基本上在输入字段后面有一组按钮,在输入中插入一个span /按钮来表示单击的按钮。
因此,在我的想象界面的简化版本中,我可以正常输入字段,但是当我按下其中一个按钮时,它们也会在字段中插入文本。假设我按下按钮1,它会插入文本“Hello”,按钮2会插入文本“Emma”。相当容易。
我想要创建的更复杂版本的工作方式类似,但是当我单击按钮1时,它会在文本字段中插入一个气泡。气泡有自己的背景颜色,包含单词“Hello”并在右上角有一个小x来消除它。当插入气泡时,它会移动克拉经过插入的气泡,我可以继续正常输入。如果我在克拉位于气泡右侧时按下退格键,它会立即删除整个气泡。这是一个简单的示例图片:
我觉得我在互联网上看到了很多这样的东西,但我无法弄清楚它是如何完成的。有没有办法用输入字段来解决这个问题?如果不可能我应该研究哪些替代方案?
答案 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
完成此操作后,从左侧点击中删除标记并从右侧点击添加标记应该很简单。
答案 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
元素会随着内容的更改而调整大小。这有点棘手,但可行!
答案 2 :(得分:-1)
这是一个标签输入。结帐这个 Bootstrap TagsInput。它具有您想要的相同功能。