Pixabay/jQuery-tagEditor

any way to avoid user enter tags (click o key on input)?

Opened this issue · 2 comments

I wanna know if exist a way to avoid the user enter a tag, i have a preloaded tags, and onclick they change their color (for filtering) ,but onclick the input activates, and left edit (with keys, no with click) and enter tags

Solved
Custom Code
``
ed.click(function (e, closest_tag) {
var d, dist = 99999, loc;

            // do not create tag when user selects tags by text selection
            if (window.getSelection && getSelection() != '') return;

            if (o.maxTags && ed.data('tags').length >= o.maxTags) { ed.find('input').blur(); return false; }

            blur_result = true
            $('input:focus', ed).blur();
            if (!blur_result) return false;
            blur_result = true

            // always remove placeholder on click
            $('.placeholder', ed).remove();
            if (closest_tag && closest_tag.length)
                loc = 'before';
            else {
                // calculate tag closest to click position
                $('.tag-editor-tag', ed).each(function () {
                    var tag = $(this), to = tag.offset(), tag_x = to.left, tag_y = to.top;
                    if (e.pageY >= tag_y && e.pageY <= tag_y + tag.height()) {
                        if (e.pageX < tag_x) loc = 'before', d = tag_x - e.pageX;
                        else loc = 'after', d = e.pageX - tag_x - tag.width();
                        if (d < dist) dist = d, closest_tag = tag;
                    }
                });
            }
            if (o.allowUserTags) {
                if (loc == 'before') {
                    $(new_tag).insertBefore(closest_tag.closest('li')).find('.tag-editor-tag').click();
                } else if (loc == 'after')
                    $(new_tag).insertAfter(closest_tag.closest('li')).find('.tag-editor-tag').click();
                else // empty editor
                    $(new_tag).appendTo(ed).find('.tag-editor-tag').click();
            }
            else {
                if (loc == "")
                    $(new_tag).appendTo(ed).find('.tag-editor-tag').click();    
            }
            // return false; //codigo original no permite .click event, este si
            return !(o.allowClickEvent);
        });

``

``
$.fn.tagEditor.defaults = {
initialTags: [],
maxTags: 0,
maxLength: 50,
allowClickEvent: false, //allow .click events
allowUserTags: true, //allow (or deny) the click en tag-edit (for insert)
delimiter: ',;',
placeholder: '',
forceLowercase: true,
removeDuplicates: true,
clickDelete: false,
animateDelete: 175,
sortable: true, // jQuery UI sortable
autocomplete: null, // options dict for jQuery UI autocomplete

    // callbacks
    onChange: function () { },
    beforeTagSave: function () { },
    beforeTagDelete: function () { }
};

} (jQuery));
``

NOTE: if you create an empty tag-editor , on click (boot new option true) ,this will minimize (but dont let enter tags), like on picture
example

This is just what I needed, thanks for sharing