JQuery Tag It - 内联编辑标签

时间:2013-11-15 07:16:31

标签: jquery tag-it

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

先谢谢

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


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

1 个答案:

答案 0 :(得分:0)

在GitHub上发布了具有此功能的solution

这是一个有效的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();
            }

现在,当您点击标记时,您将看到可以编辑它。

相关问题