js 在input 里面插入一个button

就是我现在有很多tag去选择，我想在单击之后在input窗口里面显示button样式的东西，然后单击后去掉

解决方案 »

  1.   

    demo在这儿，用chrome运行，否则很慢<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <title>test</title>
        <style type="text/css">
            *{ margin:0; padding:0;}
            body{font:12px/1.5 arial;background:#fff;}
            a{color:#2d374b;text-decoration:none}
            a:hover{color:#cd0200;text-decoration:underline}
            .demo{ width:500px;margin:0 auto;}
            .wrap{ border:1px solid #ccc;}
            .input{ height:26px; border:none;background:#fff;}
            #father{ height:28px; padding:5px;}
            #son{ padding:10px 0;}
            .sub{ width:500px;}
            .sub span{ padding:2px 4px; margin-right:5px;cursor:pointer; display:inline-block;background:#f1f1f1; border:1px solid #ccc;}
            .sub i{ margin-left:5px;}
        </style>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
    </head>
    <body>
    <div class="demo">
        <div id="father" class="wrap sub">
            <input class="input" type="">
        </div>
        <div id="son" class="sub">
            <span><a href="#">web01</a><i>X</i></span>
            <span><a href="#">web02</a><i>X</i></span>
            <span><a href="#">web03</a><i>X</i></span>
            <span><a href="#">web04</a><i>X</i></span>
            <span><a href="#">web05</a><i>X</i></span>
        </div>
    </div>
    <script type="text/javascript">
        $('#son span').click(function(){
            $('#father').prepend($(this));
        });
        $('#father').delegate('span', 'click', function(){
            $('#son').append($(this));
        })
    </script>
    </body>
    </html>
      

  2.   

    <html>
    <head>
    <title>
    test
    </title>
    <style type="text/css">
    .tags_mod .tags_editor {
    box-shadow: 0 0 6px rgba(100, 208, 233, 0.5);
    border-radius: 3px;
    border: 2px solid #64D0E9;
    background: url(http://ipic.tuita.cc/img/common/input.png?v=1346141329) no-repeat;
    padding: 10px 10px 4px;
    border-right: ;
    border-bottom: ;
    border-top: ;
    }
    .tags_mod {
    padding: 0 0 10px 0;
    position: relative;
    z-index: 1;
    zoom: 1;
    }
    input.tag {
    width: 100px;
    height: 20px;
    background: none;
    border: none;
    color: #999;
    position: absolute;
    outline: none;
    resize: none;
    padding: 0;
    }
    </style>
    </head>
    <body>
    <div class="tags_mod" attr="root" style="">
    <div class="tags_editor" attr="" style="min-height:23px">
    <span>123</span>
    <input type="text" class="tag"></div>
    </div>
    </div>
    </body>
    </html>