HTMLで入力またはテキストエリア内にタグを挿入する方法

いくつかの式を書くためのテキストエリアを設計します。数式全体を入力すると式が間違ってしまう可能性があるので、ユーザーが別のパネルから変数をドラッグアンドドロップする方が良いと思います。私はstackoverflowのタグオプションがこの目的のために有用であると信じています。
HTMLで入力またはテキストエリア内にタグを挿入する方法

どのようにこのようなテキスト領域を設計することができますか？

出典

2016-06-30 Behnam

無効なボタンをテキスト領域に挿入しようとしました。しかし、それは不可能でした – Behnam

divを作成してtextarea natureを与える必要があるtextareaのボタンを追加することはできません。 –

答えとして簡単なコードを入力してください。 – Behnam

できません。
ただし、ハイライトコンテンツを含む別のテキストブロックを、そのテキストエリアまたは入力と同じ位置に配置できます。
参考：

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

出典

2016-06-30 09:56:06

このプラグインは、あなたのための役に立つかもしれません。

出典

2016-06-30 09:56:28 asankasri

テキストボックスをタグに直接変換することはできません。しかし、テキストボックスのように見えるようにするには、内部にタグを持つコンテナとテキストボックスを与えます。

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

keypressイベントを使用すると、テキストボックスの値を取得し、tagContainerにそれを追加することができます。ここに実装が表示されます：JSFiddle

出典

2016-06-30 10:11:57

この方法では、ユーザーはタグを削除できません – Behnam

あなた自身でその機能を追加できます。私の答えを参照してください。そのプラグインがあなたに合っていれば、それを使うことができます。あるいは、@ Johanが提案したように、自分で開発することもできます。 – asankasri

@Behnamあなたは 'click'イベントを使い、' remove'を使ってタグを削除することができます。ここに実装があります：[JSFiddle]（https://jsfiddle.net/fztg615c/4/） –

HTMLで入力またはテキストエリア内にタグを挿入する方法

答えて

関連する問題