jQuery仿ace添加标签

之前复制了ace的标签，发现加载的js文件比较多，所以自己就仿了它的自定义标签，和大家分享下。

分类：文字特效 > 标签云难易：初级

查看演示下载资源下载积分： 106 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

HTML

<div class="tags" id="tags" tabindex="1"> <span class="tag"> Tag Input Control <button class="close" type="button">×</button> </span> <input id="form-field-tags" type="text" placeholder="Enter tags ..." value="Tag Input Control" name="tags" style="display: none;"/> <input type="text" placeholder="Enter tags ..." class="tags_enter" autocomplete="off"/> </div>

jQuery

$(function() {
    $(".tags_enter").blur(function() { //焦点失去触发
        addTag($(this));
        $(this).parents(".tags").css({
            "border-color": "#d5d5d5"
        })
    }).keydown(function(event) {
        var key_code = event.keyCode;
        if (key_code == 13) { //enter
            addTag($(this));
        }
    });
    $(".close").live("click",
    function() {
        $(this).parent(".tag").remove();
    });
    $(".tags").click(function() {
        $(this).css({
            "border-color": "#f59942"
        })
    }).blur(function() {
        $(this).css({
            "border-color": "#d5d5d5"
        })
    })
})

添加标签addTag()方法

function addTag(obj) {
    var tag = obj.val();
    if (tag != '') {
        var i = 0;
        $(".tag").each(function() {
            if ($(this).text() == tag + "×") {
                $(this).addClass("tag-warning");
                setTimeout("removeWarning()", 400);
                i++;
            }
        }) obj.val('');
        if (i > 0) { //说明有重复
            return false;
        }
        $("#form-field-tags").before("<span class='tag'>" + tag + "<button class='close' type='button'>×</button></span>"); //添加标签
    }
}

提示：placeholder在ie8以下不兼容，后面我们会写一篇兼容ie低版本的placeholder，敬请关注。