首页 新闻 搜索 专区 学院

博问中标签多个输入如何实现

0
悬赏园豆:20 [已解决问题] 解决于 2013-12-27 10:06

大家好!我想实现 "博问提问" 里边多个标签输入的特效!(单个自动提示我已通过Jquery实现)

望大家点拨一二,最好能有样例!

先谢过!

rat3的主页 rat3 | 初学一级 | 园豆:89
提问于:2013-04-22 18:01
< >
分享
最佳答案
0
希望能帮到你
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>multipleTagList</title>
        <style type="text/css">
            #wrapper{min-height: 10px; width: 400px; padding: 4px; border: 1px dashed; margin: 100px auto 0; overflow: hidden;}
            #hiddenInputField{background-color: inherit;border: medium none;margin: 0;outline: medium none;padding: 0;width: 40%; margin:6px 0 0 6px;}
            .newTag{background: none repeat scroll 0 0 #DEE7F8;border: 1px solid #CAD8F3;border-radius: 6px 6px 6px 6px;color: #555555; padding: 3px; float: left; margin-left: 6px;}
            .newTagName{float: left;}
            .closeNewTag{float: left; margin-left: 6px; cursor: pointer; text-decoration: blink;}
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div class="newTag">
                <div class="newTagName">123</div>
                <div class="closeNewTag">X</div>
            </div>
            <input id="hiddenInputField" type="text"/>
        </div>
    </body>
    <script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        window.cl = window.console? function(k){try{console.log(k);}catch(e){}}: alert;
        $('#hiddenInputField').on('keydown',function(e){
            e = e ? e : window.event;
            var key = e.keyCode;
            cl(key);
            //中文输入法第一个keydown为0
            if(key != 0){
                //输完一个标签,按下空格键
                if(key == 32){
                    var newTagName = $.trim(this.value);
                    if(newTagName)
                        addNewTag(newTagName);
                    this.value = '';
                }    
            }
        });

        $('#wrapper').on('click','.closeNewTag',function(){
            $(this).parent().height($(this).height()).animate({width: 0},300, function(){
                $(this).remove();
            });
        });

        function addNewTag(newTagName){
            var html = '<div class="newTag"><div class="newTagName">'+newTagName+'</div><div class="closeNewTag">X</div></div>';

            $('#hiddenInputField').before(html);
        }
    </script>
</html>

一些换行自己注意下,有问题再找我 :0

收获园豆:10
积跬步 | 菜鸟二级 |园豆:214 | 2013-04-30 15:01

已有点初样,谢谢先!

rat3 | 园豆:89 (初学一级) | 2013-06-21 13:29
其他回答(1)
0

ext.net控件里面我见过这种用法,直接可以贴上去的。asp的你找找看有木有

收获园豆:10
不负春光,努力生长 | 园豆:1382 (小虾三级) | 2013-04-22 18:49

我去看看,谢谢!

支持(0) 反对(0) rat3 | 园豆:89 (初学一级) | 2013-04-22 21:19
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册