JS敲击回车（Enter）自动分割TAG标签特效

使用方法：

引入jQuery库文件

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

插件JS结构

每个生成的标签都会生成一个input，方便表单提交

var lablId = -1;
$(function() {
    $("#kk").blur(function() {
        if (isNan(this.value) != false) {
            this.value = '用空格分隔多个标签';
            this.style.color = '#999';
        }
    });
});
$(document).ready(function() {
    $("#kk").keydown(function(event) {
        if (event.keyCode == 13) {
            var str = $("#kk").val();
            if (isNan(str) != true) {
                var li_id = $(".label li:last-child").attr('id');
                if (li_id != undefined) {
                    li_id = li_id.split('_');
                    li_id = parseInt(li_id[1]) + 1;
                } else {
                    li_id = 0;
                }
                $(".label_box").css("display", "block");
                var text = "<li id='li_" + li_id + "'><a href='javascript:;' onclick='deletes(" + li_id + ");' >" + str + "<img src='images/label_03.png' class='label-pic'></a><input type='hidden' name='label[" + li_id + "].name' value='" + str + "'></li>";
                $(".label").append(text);
            }
            $("#kk").val("");
        }
    })
});
function isNan(obj) {
    try {
        return obj == 0 ? true: !obj
    } catch(e) {
        return true;
    }
}
function deletes(id) {
    $("#li_" + id).remove();
    var li_id = $(".label li:last-child").attr('id');
    if (li_id == undefined) {
        $(".label_box").css("display", "none");
    }
}
function addlabl(id) {
    if (lablId == id) {
        return;
    }
    lablId = id;
    var str = $("#add_" + id).text();
    var li_id = $(".label li:last-child").attr('id');
    if (li_id != undefined) {
        li_id = li_id.split('_');
        li_id = parseInt(li_id[1]) + 1;
    } else {
        li_id = 0;
    }
    $(".label_box").css("display", "block");
    var text = "<li id='li_" + li_id + "'><a href='javascript:;' onclick='deletes(" + li_id + ");' >" + str + "<img src='images/label_03.png' class='label-pic'></a><input type='hidden' name='label[" + li_id + "].name' value='" + str + "'></li>";
    $(".label").append(text);
}

HTML结构

<div class="label_box">
  <ul class="label"></ul>
</div>
<div style="width:430px;margin: 0 auto;">
  <p>添加标签（输入后敲击回车键[Enter]）：</p>
  <input class="kk" id="kk"type="text" placeholder="用空格分隔多个标签" />
</div>