stackoverflow 如何制作其 Tag 输入字段?

2022-01-18 00:00:00 input tags html

StackOverflow 如何创建它的标签系统.它如何格式化文本区域中的html?

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.

像这样:

基本上，当我按空格键时，如何在 div 内部添加一个新元素/div?

推荐答案

我会做的是:

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

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

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

您可以使用 jQuery 轻松完成.

You could do it easily using jQuery.

例子:

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

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

你写了一些 jQuery/JS

And you write some jQuery / JS

相关文章