JQuery Tag It - 内联编辑标签

Question

我使用了 jQuery tagit，它将接受电子邮件地址。我已经验证了电子邮件格式的标签。我想知道如果用户输入错误，它是否也可以编辑标签。现在，如果出现问题，我们必须删除标签并重新输入。

提前致谢

 $("#singleFieldTags").tagit({
        singleField: true,
        singleFieldNode: $('#mySingleField'),
        beforeTagAdded: function (event, ui) {
            //email validation code
        }
    });


    <ul id="singleFieldTags"></ul>
     <input id="mySingleField" />

Answer 1

一个solution已发布在具有此功能的 GitHub 上。

这是一个工作 fiddle允许您编辑标签。

本质上，您需要使用 onTagClicked 参数并为其提供自定义函数:

 onTagClicked: function(event, ui) {
                var elem = $(ui.tag);
                var input = $('<input type="text" id="replaceInput" value="'+ ui.tagLabel + '" />');
                temp = ui.tagLabel;
                input.bind('blur',function(){
                    var instance = $("#mySingleField").data("tagit");
                    $(this).closest('.tagit-label').empty().append($(this).val());
                    var oldValue = temp;
                    var tags = instance.assignedTags();

                    for(var i = 0;i < tags.length;i++){
                        if (tags[i] === oldValue){
                            tags[i] = $(this).val();
                        }
                    }
                    instance._updateSingleTagsField(tags);
                });                 
                elem.find('.tagit-label').empty().append(input);
                input.focus();
            }

现在，当您单击该标签时，您将看到可以对其进行编辑。