tag-it inserting data from the clipboard

Question

This is a question regarding tag-it jquery component. Comma field delimiter works fine when I enter the tags via keyboard, but when I paste tags with a comma(for example - one, two, three) from clipboard it looks like a one single tag with a commas inside the tag. Is it possible to configure tag-it in order to recognize different(separated) tags in the scenario described above ?

Answer 1

You can use the preprocessTag function to check the given tag and eventually split it in some tags and add them to tag it using createTag.

Code:

var $tagInp = $("#tagInp");

$tagInp.tagit({
    allowSpaces: true,
    preprocessTag: function (val) {
        if (!val) {
            return '';
        }
        var values = val.split(",");
        if (values.length > 1) {
            for (var i = 0; i < values.length; i++) {
                $tagInp.tagit("createTag", values[i]);
            }
            return ''
        } else {
            return val
        }
    }
});

Demo: http://jsfiddle.net/IrvinDominin/GL6VK/

EDIT DELIMITER GOT FROM OPTION

You can get the delimiter using:

$tagInp.tagit('option','singleFieldDelimiter')

Code:

var $tagInp = $("#tagInp");

$tagInp.tagit({
    allowSpaces: true,
    preprocessTag: function (val) {
        if (!val) {
            return '';
        }
        var values = val.split($tagInp.tagit('option','singleFieldDelimiter'));
        if (values.length > 1) {
            for (var i = 0; i < values.length; i++) {
                $tagInp.tagit("createTag", values[i]);
            }
            return ''
        } else {
            return val
        }
    }
});

Demo: http://jsfiddle.net/IrvinDominin/GL6VK/2/

Answer 2

You can Edit the tag-it.js library for a permanent solution. try this Add split pattern in options

splitPattern        : ',',

Now, in the keydown event function replace that.createTag(that._cleanedInput()) with

var tags = that._cleanedInput().split(that.options.splitPattern);
                        if (tags.length > 1) {
                            tags.forEach(function(tag) {
                                that.createTag(tag);
                            });
                            event.preventDefault();
                        } else {
                            that.createTag(that._cleanedInput());
                        }