I am going to design a textarea for writing some formula. Since typing entire formula may cause mistake in formula, I think its is better that users drag and drop variables from another panel. I believe that stackoverflow's tag option could be usefull for this purpose.

How it is possible to design a text area like this?

I am going to design a textarea for writing some formula. Since typing entire formula may cause mistake in formula, I think its is better that users drag and drop variables from another panel. I believe that stackoverflow's tag option could be usefull for this purpose.

How it is possible to design a text area like this?

• javascript
• jquery
• html
• css

• I tryed to insert disabled button inside text area. But it was not possible – Behnam Commented Jun 30, 2016 at 9:38
• you cant add any button in textarea you have to create a div and give it textarea nature.. – Gaurav Aggarwal Commented Jun 30, 2016 at 9:39
• Could you please provide a simple code as answer? – Behnam Commented Jun 30, 2016 at 9:40
• ok but before that confirm what nature exactly you want with textarea.. – Gaurav Aggarwal Commented Jun 30, 2016 at 9:50
• What do you mean by "nature"? – Behnam Commented Jun 30, 2016 at 9:56

3 Answers 3

You cannot directly convert the text box into tag. But you can make it look like a text box by giving a container to have the tag inside and a text box.

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

Using keypress event, you can grab the value of textbox and append it into tagContainer. You can see the implementation here: JSFiddle

You can't.
However you can put another text block with highlight content at same position with that textarea or input.
Reference:

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

This plugin might be helpful for you. http://aehlke.github.io/tag-it/