如何在HTML的输入或文本区域内插入标签

Question

我将设计一个文本区域来编写一些公式。 由于键入整个公式可能会导致公式错误，因此我认为最好将用户从另一个面板拖放变量。 我相信stackoverflow的标签选项可能对此有用。

如何设计这样的文本区域？

Answer 1

您不能直接将文本框转换为标签。 但是您可以通过提供一个在其中包含标签的容器和一个文本框来使其看起来像一个文本框。

<div id="container"><span id="tagContainer"></span>
    <input type="text" id="inputText" placeholder="input here.." />
</div>

使用keypress事件，您可以获取textbox的值并将其附加到tagContainer 。 您可以在此处看到实现： JSFiddle

Answer 2

你不能
但是，您可以将另一个具有突出显示内容的文本块放在与该文本区域或输入相同的位置。
参考：

Visit https://codepen.io/lonekorean/pen/gaLEMR

Answer 3

该插件可能对您有帮助。 http://aehlke.github.io/tag-it/