如何计算器使其标签输入字段？如何计算器使其标签输入字段？(How does stackoverflo

如何创建StackOverflow上的标签系统。它如何格式化文本区域的HTML？

我只是不知道从哪里开始。如果有人能指导我，然后我就可以知道什么方向走，所以我可以写一些代码，有人可以检查。

像这样：

编辑：基本上，当我按下的空间，如何将新的元素/ DIV添加到div内？

Answer 1:

我会做的是：

创建主DIV带有边框（喜欢这里的边界1px的固体＃000）
之后，这个DIV里面，我将创造另一个DIV（浮动：左），另一个DIV（浮动：右）和合适的DIV中的输入。

当你写里面输入和假设你选择HTML，它建立在左侧DIV的跨度，减少右div的宽度相匹配的剩余大小。科西嘉，你的跨度内有文本HTML使用删除标志。

你可以做到这一点easilly使用jQuery。

例如：

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

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

你写一些jQuery的/ JS

Answer 2:

怎么样引导解决方案？

你可以试试这个：

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插件来帮助你做到这一点。这里有一个从快速谷歌搜索： 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>

文章来源: How does stackoverflow make its Tag input field?