stackoverflow如何创建其Tag输入字段？

Question

StackOverflow如何创建其标记系统.如何在文本区域中格式化html？

我只是不知道从哪里开始.如果有人可以指导我,那么我可以知道要采取的方向,这样我就可以编写一些可以检查的代码.

像这样:

编辑:基本上,当我按空格键时,如何在div的内部添加一个新元素/ div？

Answer 1

我会做的是:

• 创建一个带边框的主DIV(比如这里的边框1px solid#000)
• 之后,在这个DIV中,我将创建另一个DIV(float:left;),另一个DIV(float:right)和右div内的输入.

当您在输入内部写入并假设您选择HTML时,它会在左侧DIV中创建一个跨度,并减小右侧div的宽度以匹配剩余大小.在corse中,在你的span中,有带删除符号的文本HTML.

您可以使用jQuery轻松完成.

示例:

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

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

你写了一些jQuery/JS

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

代码将生成以下结果:

看看这个.

Answer 3

它没有.如果你看看DOM,你最初只看到一个输入框.添加标记后,它会<span>在带有该标记的输入框之前插入标记,并将其删除图标.输入框现在位于此<span>标记的右侧.当您单击标签进行编辑时,它会将文本框放在其位置,以便您进行编辑.所有这些都是通过Javascript完成的,并且有一些JQuery插件可以帮助您完成此任务.以下是Google搜索的快速搜索:http://xoxco.com/projects/code/tagsinput/

就样式而言,<span>元素可以包含您想要的任何CSS.

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>