How does stackoverflow make its Tag input field?

Question

How does StackOverflow create its tag system. How can it format the html in a text area?

I just don't know where to begin. If someone could guide me, then I can know what direction to take so I can write some code that someone can check.

Like this:

EDIT: Basically, when I press space, how do i add a new element/div to the inside of the div?

Answer 1

It doesn't. If you look at the DOM, you see initially just an input box. Once you add a tag, it inserts a <span> tag before the input box with that tag and it's delete icon. The input box is now to the right of this <span> tag. When you click on a tag to edit it, it puts a textbox in its place so you can edit it. All this is done with Javascript and there are some JQuery plugins to help you do this. Here's one from a quick Google search: http://xoxco.com/projects/code/tagsinput/

As far as styling goes, the <span> elements can have whatever CSS you want on them.

Answer 2

What I would do is :

• Create a master DIV with a border (like here the border 1px solid #000)
• After, inside this DIV, I will create another DIV (float: left;), another DIV (float: right) and an input inside the right div.

When you write inside the input and let's say you select HTML, it create a span in the left DIV and reduce the width of the right div to match the remaining size. Of corse, inside your span there's the text HTML with the delete sign.

You could do it easilly using jQuery.

Example :

<div id="master_div">
    <div id="categories">

    </div>
    <div id="input">
        <input type="text" value="" />
    </div>
</div>

And you write some jQuery / JS

Answer 3

What about Bootstrap solution?

You can try this :

HTML Code:

<input type="text" value="html,input,tag" data-role="tagsinput"></input>

For CSS, call these two files:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">

For Javascript, call these two files:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>

The code will generate the result below:

Check it out.

Answer 4

var es = document.querySelectorAll('.input-categories');
for (var i = 0; i < es.length; i++) {
  es[i]._list = es[i].querySelector('ul');
  es[i]._input = es[i].querySelector('input');
  es[i]._input._icategories = es[i];
  es[i].onkeydown = function(e){
    var e = event || e;
    if(e.keyCode == 13) {
      var c = e.target._icategories;
      var li = document.createElement('li');
      li.innerHTML = c._input.value;
      c._list.appendChild(li);
      c._input.value = '';
      e.preventDefault();
    }
  }
}

*{
  margin: 0px;
  padding: 0px;
}

.input-categories{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  border: 1px solid black;
}

.input-categories ul{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  list-style-type: none;
  flex-wrap: wrap;
}

.input-categories li{
  border: 1px solid black;
  border-radius: 2px;
  padding: 1px;
  margin: 1px;
}
.input-categories input{
  flex: 1 1 auto;
  align-self: flex-start;
}

<div class="input-categories">
  <ul>
    <li>moscow</li>
    <li>new york</li>
  </ul>
  <input type="text"/>
</div>

<div class="input-categories">
  <ul>
    <li>CSS</li>
    <li>PHP</li>
  </ul>
  <input type="text"/>
</div>