使用带有删除按钮的表单中的标签分组，例如带有 JS 的 gmail 中的电子邮件地址

Question

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

图中示例：

Example

谢谢

Answer 1

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

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

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

$('#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让标签有不同的颜色。

使用带有删除按钮的表单中的标签分组，例如带有 JS 的 gmail 中的电子邮件地址

Grouping tags in a form with a remove button like the email addresses in gmail with JS

html

javascript

tags