bootstrap tagsinput, 공백( space)을 구분자로 태그 등록하기

기본적으로 tagsinput은 콤마(,)로 구분된 문자열을 붙여넣기(copy & paste)하면 자동으로 나눠져 태그가 등록된다.

예켠데 한 단어로 구성된 “1,2,3” 을 복사 후 붙여 넣으면, “1”, “2”, “3” 세 단어로 구분되어 태그가 등록된다. 그런데 공백을 구분자로 하여 붙여넣기 할 경우에는 제대로 동작하지 않는 것을 확인 할 수 있다. (테스트에 사용된 버전은 v0.6.1 이다.)

이를 해결 하기 위해 아래와 같이 코드를 수정하면 해결 할 수 있다.

<!-- html code -->
<input type="text" name="tags" />

// javascript
// 엔터와 공백(space)을 이용해 태그를 구분하여 등록한다.
$("input[name=tags]").tagsinput({
    confirmKeys : [32, 13]
});


// 공백을 구분자로 하여 문자가 들어오면, 공백으로 쪼개어 개별 등록해준다.
$("input[name=tags]").on('beforeItemAdd',function(e){
    var element = $(this);
    var items = (e.item).split(/[ ]+/);
    if (items.length > 1) {
        for (var i = 0; i < items.length; i++) {
            var item = $.trim(items[i]);
            element.tagsinput('add', item);
        }
    }
    // 숫자만 등록한다.
    if (!/^[0-9]+$/.test(e.item)) e.cancel = true;

    // 문자등록을 허용하려면 아래 코드로 대체한다.
    // if (items.length > 1) e.cancel = true;
});