基于jquery 标签添加修改功能

最新推荐文章于 2023-07-16 20:05:13 发布

jmuyang

最新推荐文章于 2023-07-16 20:05:13 发布

阅读量1.3k

点赞数

分类专栏： js HTML CSS 文章标签： jquery function class input div html

本文链接：https://blog.csdn.net/jmuyang/article/details/7079004

版权

js HTML CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原本是看到朱一（http://zyiangel.blogbus.com/）博客，觉得他写的添加标签的功能很有意思，然后下来用了后，感觉不是很完善，修改不方便，浏览器兼容性也不是很好

由于最近项目可能可以用的上，于是自己动手做了一下修改，完成了比较完善的添加修改标签功能，核心代码如下：

<!DOCTYPE HTML>
 <html lang="en-US">
 <head>
     <meta charset="UTF-8">
     <title>tagInputDemo</title>
     <style type="text/css">
     body{font-size:14px;}
     /* self     */
     #taginputblock{border:2px solid #333;padding:10px;border-radius:3px;margin:50px;}
     /* taginput */
     .taginput{}
     .taginput-input{height:30px;min-width:80px;border:0;background:transparent;outline:none;display:inline-blcok;}
  .tabinput{height:33px;width:55px;border:0;background:transparent;outline:none;display:inline-blcok;
    color:#E2FFFF;font-size:14px;}
     .taginput-inputblock{height:30px;border:0;background:transparent;margin:0 5px;position:relative;display:inline-block;}
     .taginput-tag{position:relative;display:inline-block;height:28px;padding:0 20px 0 10px;line-height:30px;background:#66A3D2;margin:1px 5px;border-radius:2px;box-shadow:0 0 5px #000;color:#fff;}
     .taginput-tag-close{position:absolute;top:5px;right:5px;font-size:12px;line-height:12px;}
     .taginput-tag-placeholder{position:absolute;top:0;left:0;bottom:0;right:0;line-height:30px;color:#aaa;}
     </style>
     <script type="text/javascript" src="jquery.js" ></script>
     <script type="text/javascript">
     function tagInput(fatherNode,$){
         var This = this;
             block = $('<div class="taginput"></div>'),
             input = $('<input type="text" class="taginput-input"/>'),
             inputBlock = $('<div class="taginput-inputblock"/></div>'),
             placeholder = $('<span class="taginput-tag-placeholder">+添加标签</span>');
         block.append(inputBlock.append(input).append(placeholder)).appendTo(fatherNode);
         this.createTag = function(tagName){
             var tag = $('<span class="taginput-tag"><span class="taginput-html">'+tagName+'</span></span>'),
                 close = $('<span class="taginput-tag-close cursor-pointer">x</span>');
             tag.get(0).tagValue = tagName;
             close.click(function(){tag.remove();});
             tag.append(close).insertBefore(inputBlock);
             tag.dblclick(function(){
                 var innertag=tag.find(".taginput-html");
                 var innerhtml=innertag.html();
                 var taginput=$("<input class='tabinput' value="+innerhtml+">");
                 innertag.html(taginput);
              $('.tabinput').focus().bind("blur",function(){
                 innertag.html($('.tabinput').val());
               });
           });
   };
         this.getTags = function(){
             var nodes = block.find('.taginput-tag'),
                 list = [];
             for(var i=0;i<nodes.length;i++){
                 list.push(nodes[i].tagValue);
             }
             return list;            
        };
         placeholder.click(function(){
             $(this).hide();
             input.focus();
         });
         input.focusin(function(){
             placeholder.hide();
         });
         input.focusout(function(){
             placeholder.show();
             this.value = '';
         });
         input.keydown(function(e){
             if(e.keyCode == 32 || e.keyCode == 13){
                 var value = $.trim(this.value);
                 if(value){
                     This.createTag(value);
                     this.value = '';
                     return false;
                 }
             }else if(e.keyCode == 8){
                 if(!this.value){
                     var last = inputBlock.prev();
                     if(last){
                         last.remove();
                     }
                 }
             }
         });
     }
     </script>
 </head>
 <body>
     <div id="taginputblock"></div><br />
     </div>
     <script type="text/javascript">
     var tag = new tagInput($('#taginputblock'),$);
     tag.createTag('tag1');
     tag.createTag('tag2');
     </script>
     </body>
 </html>

核心js函数用法：添加tag： createTag(tagName); ----tagName str ;
获取tag： getTags();-----return array

双击即可编辑已有tag，编辑完后自动保存

效果：

（在此也非常感谢朱一童鞋的代码分享）

jmuyang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于jquery 标签添加修改功能

原本是看到朱一（http://zyiangel.blogbus.com/）博客，觉得他写的添加标签的功能很有意思，然后下来用了后，感觉不是很完善，修改不方便，浏览器兼容性也不是很好由于最近项目可能可以用的上，于是自己动手做了一下修改，完成了比较完善的添加修改标签功能，核心代码如下： tagInputDemo
复制链接

扫一扫