tagInputDemo

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>tagInputDemo</title>
    <style type="text/css">
    body{font-size:14px;}
    /* self     */
    #taginputblock{border:2px solid #333;padding:10px;border-radius:3px;margin:50px;}
    /* taginput */
    .taginput{}
    .taginput-input{height:30px;min-width:80px;border:0;background:transparent;outline:none;display:inline-blcok;}
    .taginput-inputblock{height:30px;border:0;background:transparent;margin:0 5px;position:relative;display:inline-block;}
    .taginput-tag{position:relative;display:inline-block;height:28px;padding:0 20px 0 10px;line-height:30px;background:#333;margin:1px 5px;border-radius:2px;box-shadow:0 0 5px #000;color:#fff;}
    .taginput-tag-close{position:absolute;top:5px;right:5px;font-size:12px;line-height:12px;}
    .taginput-tag-placeholder{position:absolute;top:0;left:0;bottom:0;right:0;line-height:30px;color:#aaa;}
    </style>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7/jquery.min.js" ></script>
    <script type="text/javascript">
    function tagInput(fatherNode,$){
        var This = this;
            block = $('<div class="taginput"></div>'),
            input = $('<input type="text" class="taginput-input"/>'),
            inputBlock = $('<div class="taginput-inputblock"/></div>'),
            placeholder = $('<span class="taginput-tag-placeholder">+添加标签</span>');
        block.append(inputBlock.append(input).append(placeholder)).appendTo(fatherNode);
        this.createTag = function(tagName){
            var tag = $('<span class="taginput-tag">'+tagName+'</span>'),
                close = $('<span class="taginput-tag-close cursor-pointer">x</span>');
            tag.get(0).tagValue = tagName;
            close.click(function(){tag.remove();});
            tag.append(close).insertBefore(inputBlock);
        };
        this.getTags = function(){
            var nodes = block.find('.taginput-tag'),
                list = [];
            for(var i=0;i<nodes.length;i++){
                list.push(nodes[i].tagValue);
            }
            return list;
        };
        placeholder.click(function(){
            $(this).hide();
            input.focus();
        });
        input.focusin(function(){
            placeholder.hide();
        });
        input.focusout(function(){
            placeholder.show();
            this.value = '';
        });
        input.keydown(function(e){
            if(e.keyCode == 32 || e.keyCode == 13){
                var value = $.trim(this.value);
                if(value){
                    This.createTag(value);
                    this.value = '';
                    return false;
                }
            }else if(e.keyCode == 8){
                if(!this.value){
                    var last = inputBlock.prev();
                    if(last){
                        last.remove();
                    }
                }
            }
        });
    }
    </script>
</head>
<body>
    <h1 style="margin:50px;">tagInput Demo ------- [code by <a href="http://zyiangel.blogbus.com">zythum_朱一</a>]</h1>
    <div id="taginputblock"></div><br />
    <div style="margin:50px">
    <h2>截图效果：</h2><br />
    <img src="http://pic.yupoo.com/zythum02/BvEJSHj3/medium.jpg"><br />
    初始化： tagInput(parentNode,$);<br />
    方法[添加tag]： createTag(tagName); ----tagName str ;<br />
    方法[获取tag]： getTags();-----return array
    </div>
    <script type="text/javascript">
    var tag = new tagInput($('#taginputblock'),$);
    tag.createTag('tag1');
    tag.createTag('tag2');
    </script>
    </body>
</html>

tagInput Demo ------- [code by zythum_朱一]

截图效果：