javascript - How to insert tags inside a input or textarea in html - Stack Overflow

admin管理员组

文章数量:1399269

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

Share Improve this question Follow asked Jun 30, 2016 at 9:35 BehnamBehnam 1,06333 gold badges1414 silver badges3939 bronze badges 5

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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/

本文标签： javascriptHow to insert tags inside a input or textarea in htmlStack Overflow