怎么做类似csdn这种标签输入效果

javascriptjquery特效

解决方案 »

  1.   

    <html>
    <head>
        <title>Index</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://cloud.xing-xing.com/jquery.js"></script> 
    <style>
    .tagPanel{position:relative;}
    .tagSpan{position: absolute;z-index: 101;float: left;top: 1px;}
    .tagPanel .tagSpan span{cursor: default;display: inline-block;border: solid 1px #ccc;background-color: #ffffcc;border-radius: 5px;padding: 2px 4px;margin-right: 4px;}
    .tagPanel input{padding-left:3px;outline:none;}
    </style>
    </head>
    <body>
    <div id="tagPanel" class="tagPanel" style="border:1px gray solid; height:25px width:200px;">
    <div class="tagSpan">
    </div>
    <input type="text" style="border:0; width:100%;height:25px;" id="tag"/>
    </div>
    </body>
    <script>
    $(function () {
    $("#tag").blur(function(){
    var val = $(this).val();
    if(val){
    $("<span>"+val+"</span>").appendTo($(".tagSpan"));
    resizeInput();
    $(this).val("");
    }
    }).keyup(function(evt){
    if(evt.which == 8){
    $(".tagPanel span:last").remove();
    resizeInput();
    }
    });

    $(".tagPanel span").live("click",function(){
    var $spans = $(this).remove();
    resizeInput();
    });
    });function resizeInput(){
    var panelWidth = $("#tagPanel").css("width");
    panelWidth = panelWidth.substring(0, panelWidth.length-2);
    var tagWidth = $(".tagSpan").css("width");
    vtagWidth = tagWidth.substring(0, tagWidth.length-2);
    var inputWidth = panelWidth - tagWidth;
    $('#tag').css({"width":inputWidth,"marginLeft":tagWidth});
    }
    </script>
    </html>