博问中标签多个输入如何实现
0
悬赏园豆：20
[已解决问题]
解决于 2013-12-27 10:06
大家好！我想实现 "博问提问" 里边多个标签输入的特效！(单个自动提示我已通过Jquery实现)
望大家点拨一二,最好能有样例!
先谢过!
最佳答案
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
已有点初样，谢谢先！
其他回答(1)
0
ext.net控件里面我见过这种用法，直接可以贴上去的。asp的你找找看有木有
收获园豆：10
我去看看，谢谢！
