jQuery仿ace添加标签_文字特效_客服_ace_自定义

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

淘建站为您提供更多_文字特效_客服_ace_自定义，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 301 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

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

HTML

Tag Input Control

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