Как stackoverflow создает поле ввода тега?

Как StackOverflow создает свою систему тегов. Как можно форматировать html в текстовой области?

Я просто не знаю, с чего начать. Если кто-то может мне помочь, тогда я могу знать, в каком направлении идти, поэтому я могу написать код, который кто-то может проверить.

Как это:

EDIT: В основном, когда я нажимаю пробел, как добавить новый элемент /div во внутреннюю часть div?

Ответ 1

Что бы я сделал, это:

Создайте основной DIV с рамкой (как здесь граница 1px solid # 000)
После этого внутри DIV я создам еще один DIV (float: left;), еще один DIV (float: right) и вход внутри правого div.

Когда вы пишете внутри ввода и, скажем, выбираете HTML, он создает интервал в левом DIV и уменьшает ширину правого div, чтобы соответствовать оставшемуся размеру. Конечно, внутри вашего пролета есть текст HTML со знаком удаления.

Вы можете сделать это легко, используя jQuery.

Пример:

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

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

И вы пишете JQuery/JS

Ответ 2

Как насчет решения Bootstrap?

Вы можете попробовать следующее:

Код HTML:

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

Для CSS вызовите эти два файла:

<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">

Для Javascript вызовите эти два файла:

<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>

Код будет генерировать результат ниже:

Проверьте это.

Ответ 3

Это не так. Если вы посмотрите на DOM, сначала вы видите только поле ввода. После добавления тега он вставляет тег <span> перед полем ввода с этим тегом и удаляет значок. Поле ввода теперь находится справа от этого тега <span>. Когда вы нажимаете на тег для его редактирования, он помещает текстовое поле на свое место, чтобы вы могли его редактировать. Все это делается с помощью Javascript, и есть некоторые плагины JQuery, которые помогут вам в этом. Здесь один из быстрого поиска Google: http://xoxco.com/projects/code/tagsinput/

Что касается стиля, элементы <span> могут иметь любой CSS, который вы хотите на них.

Ответ 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>