本文共 3005 字，大约阅读时间需要 10 分钟。
在博客中经常看到标签的特效，很实用。如：
标签间请用“空格”或“逗号”隔开
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
- <style>
- <!--
- .tips_content { border:1px solid #bbb;width:200px; background:#fff; overflow-x:hidden; _height:30px; min-height:30px;}
- .tips_content ul{list-style-type:none;margin:0px;padding:0px;}
- .tips_content li { line-height: 22px; color: #667C6E; background: #F4F4F4; padding: 0px 3px; float: left; height: 22px; border: 1px solid #D7D7D7; margin:0 5px 5px 0; border-radius:3px; cursor:default; display:inline; white-space: nowrap;font-size:12px;}
- .tips_content li a { font-size:12px;cursor:pointer;text-decoration:none;}
- .tips_content li a:hover {color:#B3BBC3;text-decoration:none;}
- -->
- </style>
- <script>
- // JavaScript Document
- $(function(){
- var thisval = $(".tips_content input").val();
- var thisul = ".tips_content ul";
- $(".tips_content").click(function(){
- //点击标签框的任意位置都使input获得焦点
- $(this).children("input").focus();
- });
- //标签后面的“X”绑定单击事件
- $(".tips_content li a").live("click",function(){
- //点击标签的“X”删除此标签
- $(this).parent().remove();
- return false;
- });
- //输入框获得焦点时
- $(".tips_content input").focus(function(){
- var fristval = $(this).val();
- if(fristval == thisval){
- $(this).val("").css("color","#333");
- }
- //按键弹起时，调用jquery的event方法
- $(this).keydown(function(event){
- //定义键盘值，定义输入框的内容
- var keycode = event.which;
- m = $(this).val();
- //如果按键是回车或者逗
- if(keycode == 13||keycode == 188||keycode == 32){
- //取消按键的默认行为
- event.preventDefault();
- event.returnValue = false;
- //去除标签前后的空格
- var mm =$.trim(m);
- if(mm != ""){
- //添加li到ul
- $("<li>"+mm+"<a>×</a></li>").appendTo(thisul);
- //清空输入框
- $(this).val("").unbind("appendTo");
- }
- //如果按键是Backspace或者Delete
-
- }else if(keycode == 46||keycode == 8){
- //如果输入框内容为空
- if(m == ""){
- //删除最后一个li
- var s = $(".tips_content ul li").length;
- if(s>0){
- $(".tips_content ul li:last").remove().unbind(remove);
- }
- }
- }
- });
- //为中文标点“逗号”单独设置的keyup事件
- $(this).keyup(function(){
- var searchthis = $(this).val();
- //如果val值存在中文逗号，即按下中文逗号，执行事件
- if(searchthis.indexOf("，") != -1){
- //正则表达式，全局搜索val值中的中文逗号
- var resome = /，/g;
- //将中文逗号替换为空，去除val值前后空格
- searchthis = $.trim(searchthis.replace(resome,""));
- //给val返回处理完的值
- $(this).val(searchthis);
- //如果返回的值不为空
- if(searchthis != ""){
- //添加li到ul
- $("<li>"+searchthis+"<a>×</a></li>").appendTo(thisul);
- //清空输入框
- $(this).val("").unbind("appendTo");
- };
- };
- });
- //失去焦点时
- }).blur(function(){
- //定义input的val值
- z = $(this).val();
- //定义标签的个数
- licount = $(".tips_content li").length;
- //如果值为空
- if(z == ""){
- //如果标签数为0
- if(licount == 0){
- //返回最初状态
- $(this).val(thisval).css("color","#999");
- }else{
- return false;
- };
- //如果不为空
- }else{
- //将此值变成标签
- $("<li>"+z+"<a>×</a></li>").appendTo(thisul);
- //清空输入框
- $(this).val("").unbind("appendTo");
- }
- });
- });
- </script>
-
- </head>
-
- <body>
- <div class="tips_content">
- <ul></ul>
- <input type="text" size="5" style="border:none" />
- </div>
- </body>
- </html>
本文转自许琴 51CTO博客，原文链接：http://blog.51cto.com/xuqin/1084827，如需转载请自行联系原作者