Jquery實現關鍵字標簽生成插件

$.fn.extend({
    tabControl: function(options, tags) {
        var defOpt = {
            initTabCount: 1,
            maxTabCount: 10,
            tabMaxLen: 10,
            tabW: 150,
            tabH: 15,
            tipTOffset: 5,
            tipLOffset: 0
        };
        var opts = $.extend(defOpt, options);
        var _tags = [];
        if (tags) {
            tags = tags.replace(/[^A-Za-z0-9_,\u4E00-\u9FA5]+/gi, "").replace(/^,+|,+$/gi, "");//將非中英文、數字、下劃絲、逗號的其他字符都去掉，且不能以逗號開頭與結束
            _tags = tags.split(',');
        }
        _tags = _tags.length > opts.maxTabCount ? _tags.slice(0, opts.maxTabCount - 1) : _tags;
        opts.initTabCount = opts.maxTabCount <= _tags.length ? _tags.length: _tags.length + (opts.maxTabCount - _tags.length > opts.initTabCount ? opts.initTabCount: opts.maxTabCount - _tags.length);
        var checkReg = /[^A-Za-z0-9_\u4E00-\u9FA5]+/gi;//匹配非法字符
        var initTab = function(obj, index) {//初始化標簽輸入
            var textHtml = "<input class='tabinput' name='tabinput' style='width:" + opts.tabW + "px;height:" + opts.tabH + "px;' type='text'/>";
            obj.append(textHtml);
            if (_tags[index]) {
                var __inputobj = $("input[type='text'][name='tabinput']", obj).eq(index);
                __inputobj.val(_tags[index].substr(0, opts.tabMaxLen)).css("display", "none");
                compTab(obj, __inputobj, _tags[index].substr(0, opts.tabMaxLen));
            }
            $("input[type='text'][name='tabinput']:last", obj).bind("keydown blur click",
            function(event) {
                if (event.type == "click") {//這個事件處理函數會接收到一個事件對象(event)，可以通過它來阻止（瀏覽器）默認的行為。如果既想取消默認的行為「event.preventDefault()」，又想阻止事件起泡「event.stopPropagation()」，這個事件處理函數必須返回false。
                    return false;
                }
                if (event.keyCode == 13 || event.keyCode == 9 || event.type == "blur") {
                    event.preventDefault();//主要是為了tab鍵，不要讓當前元素失去焦點（即阻止（瀏覽器）默認的行為）
                    event.stopPropagation();
                    var inputObj = $(this);
                    var value = $(this).val().replace(/\s+/gi, "");
                    if ((event.keyCode == 13 || event.keyCode == 9) && value != "")//主要是處理IE
                     inputObj.data("isIEKeyDown", true);
                    if (event.type == "blur" && inputObj.data("isIEKeyDown")) {
                        inputObj.removeData("isIEKeyDown");
                        return;
                    }
                    if (value != "") {
                        if (value.length > opts.tabMaxLen) {
                            showMes($(this), "請輸入1到" + opts.tabMaxLen + "個字符長度的標簽");
                            return;
                        }
                        var _match = value.match(checkReg);
                        if (!_match) {
                            compTab(obj, inputObj, value);
                            if ($("input[type='text'][name='tabinput']", obj).length < opts.maxTabCount) {
                                if (!inputObj.data("isModify"))
                                 initTab(obj);
                                else if (!$("input[type='text'][name='tabinput']", obj).is(":hidden")) {
                                    initTab(obj);
                                }
                            }
                            $("input[type='text']:last", obj).focus();
                            hideErr();
                        }
                         else {
                            showMes(inputObj, "內容不能包含非法字符「{0}」！".replace("{0}", _match.join(" ")));
                        }
                    }
                     else {
                        if (event.type != "blur")
                         showMes(inputObj, "內容不為空");
                    }
                }
            }).bind("focus",
            function() {
                hideErr();
            });
        }
        //完成標簽編寫
        var compTab = function(obj, inputObj, value) {
            inputObj.next("span").remove();//刪除緊跟input元素後的span
            var _span = "<span name='tab' id='radius'><b>" + value + "</b><a id='deltab'>×</a></span>";
            inputObj.after(_span).hide();
            inputObj.next("span").find("a").click(function() {
                if (confirm("確定刪除該標簽？")) {
                    inputObj.next("span").remove();
                    inputObj.remove();
                    if ($("span[name='tab']", obj).length == opts.maxTabCount - 1)
                     initTab(obj);
                }
            });
            inputObj.next("span").dblclick(function() {
                inputObj.data("isModify", true).next("span").remove();
                inputObj.show().focus();
            });
        }
        return this.each(function() {
            var jqObj = $(this);
            for (var i = 0; i < opts.initTabCount; i++) {
                initTab(jqObj, i);
            }
            jqObj.data("isInit", true);
            jqObj.click(function() {
                $("input[type='text'][name='tabinput']", jqObj).each(function() {
                    if ($(this).val() == "") {
                        $(this).focus();
                        return false;
                    }
                });
            });
        });
        function showMes(inputObj, mes) {
            var _offset = inputObj.offset();
            var _mesHtml = "<div id='errormes' class='radius_shadow' style='position:absolute;left:" + (_offset.left + opts.tipLOffset) + "px;top:" + (_offset.top + opts.tabH + opts.tipTOffset) + "px;'>" + mes + "</div>";
            $("#errormes").remove();
            $("body").append(_mesHtml);
        }
        function hideErr() {
            $("#errormes").hide();
        }
        function showErr() {
            $("#errormes").show();
        }
    },
    getTabVals: function() {//獲取當前容器所生成的tab值，結果是一維數組
        var obj = $(this);
        var values = [];
        obj.children("span[name=\"tab\"][id^=\"radius\"]").find("b").text(function(index, text) {
            var checkReg = /[^A-Za-z0-9_\u4E00-\u9FA5]+/gi;
            values.push(text.replace(checkReg, ""));
        });
        return values;
    }
});

項目主頁：http://www.baiduhome.net/lib/view/home/1344614175039