js 在input 里面插入一个button

新生思宇 2013-01-23 10:43:52
就是我现在有很多tag去选择,我想在单击之后在input窗口里面显示button样式的东西,然后单击后去掉
...全文
453 2 点赞 打赏 收藏 举报
写回复
2 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
豪情 2013-01-23
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>
  • 打赏
  • 举报
回复
新生思宇 2013-01-23
<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>
  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript
加入

8.5w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2013-01-23 10:43
社区公告
暂无公告