2

What I am looking for is an element or some other way to have both a span (or other container) and editable text in the same box, in this case one of the boxes on the left.

Example boxes

What I am trying to do is allow a user to click directly on the box, type some text, and then have them be able to add another "bubble" of text by pressing enter.

This project is currently using Angularjs, JQuery, and Bootstrap, so anything from any of these (or from vanilla Javascript) could be used to answer the question.

Connor
  • 222
  • 1
  • 9

2 Answers2

2

Stack Overflow has the same UI control when asking a question - in fact you just used it to tag your question!

If you inspect it you'll see it's a div disguised as an input - a "faux input" if you will. Inside it is a real input, and when you enter a tag, it moves the input over and adds a <span> styled like a tag in front of it, that you can delete by clicking the 'X'.

Maybe you should adopt a similar pattern.

enter image description here

inorganik
  • 24,255
  • 17
  • 90
  • 114
  • This answer worked for me. I did a little more searching and found out how to get an input to fill only what's left of the container here: http://stackoverflow.com/a/11815907/4992532 – Connor Dec 02 '15 at 23:00
0

Why don't you check out these libraries?

https://select2.github.io/examples.html#tags

https://github.com/aehlke/tag-it

http://xoxco.com/projects/code/tagsinput/

Tim S
  • 5,023
  • 1
  • 34
  • 34