jQuery仿ace添加标签

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

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，敬请关注。