CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Behnam
Behnam

Reputation: 1063

How to insert tags inside a input or textarea in html

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.
enter image description here

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

Upvotes: 2

Views: 11760

Answers (3)

Johan Pranata
Johan Pranata

Reputation: 317

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

Upvotes: 4

asankasri
asankasri

Reputation: 486

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

Upvotes: 0

Văn Quyết
Văn Quyết

Reputation: 2526

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

Upvotes: 0

Related Questions