如何在html中的输入或textarea中插入标签

Question

我打算设计一个textarea来编写一些公式。由于输入整个公式可能会导致公式出错，我认为用户从另一个面板拖放变量会更好。我相信stackoverflow的标签选项对于此目的可能是有用的

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

Answer 1

您无法直接将文本框转换为标记。但是你可以通过给一个容器来标记文本框和文本框来使它看起来像文本框。

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

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

Answer 2

你做不到。
但是，您可以将另一个带有高亮内容的文本块放在与该textarea或输入相同的位置。
参考：

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

Answer 3

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