javascript - 使用删除按钮对表单中的标签进行分组，就像使用 JS 处理 gmail 中的电子邮件地址一样

Question

我为我的网站开发了一个标签系统，人们可以添加标签。有人可以通过单击按钮在表单中添加标签。在这种形式中，人们将能够添加多个标签，有没有一种方法可以像 StackOverflow 标签或 gmail 中的电子邮件地址那样对标签进行分组，并在需要时用 X 删除它？

图中的示例:

谢谢

Answer 1

您没有提到使用 jQuery，不过，我给您提供了一个可以使用的快速方法。

创建一个文本框，并为其指定 100% 宽度，并使用“tag_text”之类的内容对其进行 ID。在文本框之前，创建一个 DIV 并为其指定一个 ID，例如 "tags_container"。

添加一个 keyup (onkeyup for JS)监听器并查看文本框是否包含与您的标签要求相匹配的文本。如果是，请创建标签。

$('#tag_text').on('keyup',{},function(e){
    if(e.which==8)
    {
        //Check if the TAB key was pressed
        var tag=$('<div class="tag">').appendTo($("#tags_container"));
        var tagText=$('<span class="tagtext">').appendTo(tag).text($('#tag_text').val());
        var tagIcon=$('<span class="tagremove"').appendTo(tag).text('X');

        $(tagIcon).click({},function(e){
            $(this).remove();
            //Reset the textbox text:
            $('#tag_text').val("");
        });
    }
}

提供适当的CSS，以便标签具有不同的颜色。