Is there an HTML element that can hold spans and have editable text inside?

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.

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.

Answers


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.


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/


Need Your Help

400 Problems parsing JSON - GitHub API and POSTMAN using OAuth

json github oauth github-api postman

I want to create a file in my private Repo via the GitHub API.