如何在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/