给文章加标签

看标题，就知道这个插件是做什么的。使用步骤如下：

（一）引入相关文件：

引入jquery.tagbox.css和jquery.tagbox.js，前提是引入jquery文件。

（二）加入此控件：

 <input type="text" id="jquery-tagbox-text" />

（三）初始化：

     

 $(document).ready(function($) {
           $("#jquery-tagbox-text").tagBox();
      });

由于发布此插件的时候，其使用的jquery版本是1.5，在1.9以后的版本中会报一个错:

TypeError: jQuery(...).live is not a function

这是由于jquery1.9以后的版本废除了live函数，所以要改源码

将jquery.tagbox.js里的这句：$('.'+options.className+'-remove-'+uuid).live( "click", function () {

改为：$(document).on( "click",'.'+options.className+'-remove-'+uuid, function () {

就可以正常使用。输入标签按回车或者点击“ADD TAG”按钮，标签会显示在输入框下面，点击标签上的关闭按钮，可删除该标签。

默认它标签的颜色是蓝色，博主觉得太丑，就改了它的css，改成透明色

修改如下：   

span.tagBox-item-content {
      display: inline-block;
      padding: 0.417em 0.417em;
      font-size: 1em;
      line-height: 1.4em;
      text-shadow: 0.083em 0.083em 0.083em #888;
    /*  border: 0.083em solid #3C7BA8;
    */  color: #000000;
      background: #FFF;
      /*background: -webkit-gradient(linear, left top, left bottom, from(#4998CF), to(#FFF));
      background: -moz-linear-gradient(top, #4998CF, #FFF);*/
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4998CF', endColorstr='#FFF');
      -moz-border-radius: 0.5em;
      -wekit-border-radius: 0.5em;
      border-radius: 0.5em;
    }

（四）获取tag的值：

获取文本框的值就可以了，多个值以英文的逗号分隔。

var tagValue=document.getElementById("jquery-tagbox-text").value;

要是编辑页面的话，需要页面加载完成显示原来添加的标签，在控件初始化之前赋值就ok了（多个值用英文逗号连接）。

   

   $(document).ready(function($) {
           document.getElementById("jquery-tagbox-text").value="人才,天才,英才";
            $("#jquery-tagbox-text").tagBox();
      });

原文：https://blog.csdn.net/qq_33556185/article/details/50725442