在网上找的，效果如下

html代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <title>flat-ui标签</title>
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width" />
  8. <script src="js/jquery.min.js"></script>
  9. <link rel="stylesheet" type="text/css" href="css/css.css"/>
  10. <script src="js/tagsinput.js" type="text/javascript" charset="utf-8"></script>
  11.  
  12. </head>
  13. <body>
  14.  
  15. <div class="box">
  16.     <h1 style="text-align: center;margin: 20px 0;margin-top: 200px;">提取input中的标签</h1>
  17.     <div class="tagsinput-primary form-group">
  18.         <input name="tagsinput" id="tagsinputval" class="tagsinput" data-role="tagsinput" value="faltui,这是一个标签" placeholder="输入后回车"/>
  19.         <button class="btn" onClick="getinput()">获取输入的值</button>
  20.     </div>
  21. </div>
  22.  
  23. <script type="text/javascript">
  24. function getinput(){
  25.     alert($('#tagsinputval').val());
  26. }
  27. </script>
  28.  
  29. </body>
  30. </html>

CSS代码：

  1. *{margin:;padding:;list-style-type: none;text-decoration: none;}
  2. .box{width: 500px;margin: auto;}
  3. .bootstrap-tagsinput {
  4.   background-color: white;
  5.   border: 2px solid #ebedef;
  6.   border-radius: 6px;
  7.   margin-bottom: 18px;
  8.   padding: 6px 1px 1px 6px;
  9.   text-align: left;
  10.   font-size:;
  11. }
  12.  
  13. .bootstrap-tagsinput .badge {
  14.   border-radius: 4px;
  15.   background-color: #ebedef;
  16.   color: #7b8996;
  17.   font-size: 13px;
  18.   cursor: pointer;
  19.   display: inline-block;
  20.   position: relative;
  21.   vertical-align: middle;
  22.   overflow: hidden;
  23.   margin: 0 5px 5px 0;
  24.  
  25.   padding: 6px 28px 6px 14px;
  26.   transition: .25s linear;
  27. }
  28.  
  29. .bootstrap-tagsinput .badge > span {
  30.   color: white;
  31.   padding: 0 10px 0 0;
  32.   cursor: pointer;
  33.   font-size: 12px;
  34.   position: absolute;
  35.   right:;
  36.   text-align: right;
  37.   text-decoration: none;
  38.   top:;
  39.   width: 100%;
  40.   bottom:;
  41.   z-index:;
  42. }
  43.  
  44. .bootstrap-tagsinput .badge > span:after {
  45.   content: "x";
  46.   font-family: "Flat-UI-Pro-Icons";
  47.   -webkit-font-smoothing: antialiased;
  48.   -moz-osx-font-smoothing: grayscale;
  49.   line-height: 27px;
  50. }
  51.  
  52. @media (hover: hover) {
  53.   .bootstrap-tagsinput .badge {
  54.     padding: 6px 21px;
  55.   }
  56.   .bootstrap-tagsinput .badge > span {
  57.     opacity:;
  58.     filter: "alpha(opacity=0)";
  59.     transition: opacity .25s linear;
  60.   }
  61.   .bootstrap-tagsinput .badge:hover {
  62.     background-color: #16a085;
  63.     color: white;
  64.     padding-right: 28px;
  65.     padding-left: 14px;
  66.   }
  67.   .bootstrap-tagsinput .badge:hover > span {
  68.     padding: 0 10px 0 0;
  69.     opacity:;
  70.     -webkit-filter: none;
  71.             filter: none;
  72.   }
  73. }
  74.  
  75. .bootstrap-tagsinput input[type="text"] {
  76.   font-size: 14px;
  77.   border: none;
  78.   box-shadow: none;
  79.   outline: none;
  80.   background-color: transparent;
  81.   padding:;
  82.   margin:;
  83.   width: auto !important;
  84.   max-width: inherit;
  85.   min-width: 80px;
  86.   vertical-align: top;
  87.   height: 29px;
  88.   color: #34495e;
  89. }
  90.  
  91.     .tagsinput-primary {
  92.   margin-bottom: 18px;
  93. }
  94.  
  95. .tagsinput-primary .bootstrap-tagsinput {
  96.   border-color: #1abc9c;
  97.   margin-bottom:;
  98. }
  99.  
  100. .tagsinput-primary .badge {
  101.   background-color: #1abc9c;
  102.   color: white;
  103. }
  104. .btn{background: #1ABC9C;border: none;color: #fff;padding: 10px;border-radius: 5px;margin-top: 10px;}

JQ代码：

  1.  /* bootstrap-tagsinput v0.8.0
  2.  */
  3.  
  4. (function ($) {
  5.   "use strict";
  6.  
  7.   var defaultOptions = {
  8.     tagClass: function(item) {
  9.       return 'badge badge-info';
  10.     },
  11.     focusClass: 'focus',
  12.     itemValue: function(item) {
  13.       return item ? item.toString() : item;
  14.     },
  15.     itemText: function(item) {
  16.       return this.itemValue(item);
  17.     },
  18.     itemTitle: function(item) {
  19.       return null;
  20.     },
  21.     freeInput: true,
  22.     addOnBlur: true,
  23.     maxTags: undefined,
  24.     maxChars: undefined,
  25.     confirmKeys: [13, 44],
  26.     delimiter: ',',
  27.     delimiterRegex: null,
  28.     cancelConfirmKeysOnEmpty: false,
  29.     onTagExists: function(item, $tag) {
  30.       $tag.hide().fadeIn();
  31.     },
  32.     trimValue: false,
  33.     allowDuplicates: false,
  34.     triggerChange: true
  35.   };
  36.  
  37.   /**
  38.    * Constructor function
  39.    */
  40.   function TagsInput(element, options) {
  41.     this.isInit = true;
  42.     this.itemsArray = [];
  43.  
  44.     this.$element = $(element);
  45.     this.$element.hide();
  46.  
  47.     this.isSelect = (element.tagName === 'SELECT');
  48.     this.multiple = (this.isSelect && element.hasAttribute('multiple'));
  49.     this.objectItems = options && options.itemValue;
  50.     this.placeholderText = element.hasAttribute('placeholder') ? this.$element.attr('placeholder') : '';
  51.     this.inputSize = Math.max(1, this.placeholderText.length);
  52.  
  53.     this.$container = $('<div class="bootstrap-tagsinput"></div>');
  54.     this.$input = $('<input type="text" placeholder="' + this.placeholderText + '"/>').appendTo(this.$container);
  55.  
  56.     this.$element.before(this.$container);
  57.  
  58.     this.build(options);
  59.     this.isInit = false;
  60.   }
  61.  
  62.   TagsInput.prototype = {
  63.     constructor: TagsInput,
  64.  
  65.     /**
  66.      * Adds the given item as a new tag. Pass true to dontPushVal to prevent
  67.      * updating the elements val()
  68.      */
  69.     add: function(item, dontPushVal, options) {
  70.       var self = this;
  71.  
  72.       if (self.options.maxTags && self.itemsArray.length >= self.options.maxTags)
  73.         return;
  74.  
  75.       // Ignore falsey values, except false
  76.       if (item !== false && !item)
  77.         return;
  78.  
  79.       // Trim value
  80.       if (typeof item === "string" && self.options.trimValue) {
  81.         item = $.trim(item);
  82.       }
  83.  
  84.       // Throw an error when trying to add an object while the itemValue option was not set
  85.       if (typeof item === "object" && !self.objectItems)
  86.         throw("Can't add objects when itemValue option is not set");
  87.  
  88.       // Ignore strings only containg whitespace
  89.       if (item.toString().match(/^\s*$/))
  90.         return;
  91.  
  92.       // If SELECT but not multiple, remove current tag
  93.       if (self.isSelect && !self.multiple && self.itemsArray.length > 0)
  94.         self.remove(self.itemsArray[0]);
  95.  
  96.       if (typeof item === "string" && this.$element[0].tagName === 'INPUT') {
  97.         var delimiter = (self.options.delimiterRegex) ? self.options.delimiterRegex : self.options.delimiter;
  98.         var items = item.split(delimiter);
  99.         if (items.length > 1) {
  100.           for (var i = 0; i < items.length; i++) {
  101.             this.add(items[i], true);
  102.           }
  103.  
  104.           if (!dontPushVal)
  105.             self.pushVal(self.options.triggerChange);
  106.           return;
  107.         }
  108.       }
  109.  
  110.       var itemValue = self.options.itemValue(item),
  111.           itemText = self.options.itemText(item),
  112.           tagClass = self.options.tagClass(item),
  113.           itemTitle = self.options.itemTitle(item);
  114.  
  115.       // Ignore items allready added
  116.       var existing = $.grep(self.itemsArray, function(item) { return self.options.itemValue(item) === itemValue; } )[0];
  117.       if (existing && !self.options.allowDuplicates) {
  118.         // Invoke onTagExists
  119.         if (self.options.onTagExists) {
  120.           var $existingTag = $(".badge", self.$container).filter(function() { return $(this).data("item") === existing; });
  121.           self.options.onTagExists(item, $existingTag);
  122.         }
  123.         return;
  124.       }
  125.  
  126.       // if length greater than limit
  127.       if (self.items().toString().length + item.length + 1 > self.options.maxInputLength)
  128.         return;
  129.  
  130.       // raise beforeItemAdd arg
  131.       var beforeItemAddEvent = $.Event('beforeItemAdd', { item: item, cancel: false, options: options});
  132.       self.$element.trigger(beforeItemAddEvent);
  133.       if (beforeItemAddEvent.cancel)
  134.         return;
  135.  
  136.       // register item in internal array and map
  137.       self.itemsArray.push(item);
  138.  
  139.       // add a tag element
  140.  
  141.       var $tag = $('<span class="badge ' + htmlEncode(tagClass) + (itemTitle !== null ? ('" title="' + itemTitle) : '') + '">' + htmlEncode(itemText) + '<span data-role="remove"></span></span>');
  142.       $tag.data('item', item);
  143.       self.findInputWrapper().before($tag);
  144.       $tag.after(' ');
  145.  
  146.       // Check to see if the tag exists in its raw or uri-encoded form
  147.       var optionExists = (
  148.         $('option[value="' + encodeURIComponent(itemValue) + '"]', self.$element).length ||
  149.         $('option[value="' + htmlEncode(itemValue) + '"]', self.$element).length
  150.       );
  151.  
  152.       // add <option /> if item represents a value not present in one of the <select />'s options
  153.       if (self.isSelect && !optionExists) {
  154.         var $option = $('<option selected>' + htmlEncode(itemText) + '</option>');
  155.         $option.data('item', item);
  156.         $option.attr('value', itemValue);
  157.         self.$element.append($option);
  158.       }
  159.  
  160.       if (!dontPushVal)
  161.         self.pushVal(self.options.triggerChange);
  162.  
  163.       // Add class when reached maxTags
  164.       if (self.options.maxTags === self.itemsArray.length || self.items().toString().length === self.options.maxInputLength)
  165.         self.$container.addClass('bootstrap-tagsinput-max');
  166.  
  167.       // If using typeahead, once the tag has been added, clear the typeahead value so it does not stick around in the input.
  168.       if ($('.typeahead, .twitter-typeahead', self.$container).length) {
  169.         self.$input.typeahead('val', '');
  170.       }
  171.  
  172.       if (this.isInit) {
  173.         self.$element.trigger($.Event('itemAddedOnInit', { item: item, options: options }));
  174.       } else {
  175.         self.$element.trigger($.Event('itemAdded', { item: item, options: options }));
  176.       }
  177.     },
  178.  
  179.     /**
  180.      * Removes the given item. Pass true to dontPushVal to prevent updating the
  181.      * elements val()
  182.      */
  183.     remove: function(item, dontPushVal, options) {
  184.       var self = this;
  185.  
  186.       if (self.objectItems) {
  187.         if (typeof item === "object")
  188.           item = $.grep(self.itemsArray, function(other) { return self.options.itemValue(other) ==  self.options.itemValue(item); } );
  189.         else
  190.           item = $.grep(self.itemsArray, function(other) { return self.options.itemValue(other) ==  item; } );
  191.  
  192.         item = item[item.length-1];
  193.       }
  194.  
  195.       if (item) {
  196.         var beforeItemRemoveEvent = $.Event('beforeItemRemove', { item: item, cancel: false, options: options });
  197.         self.$element.trigger(beforeItemRemoveEvent);
  198.         if (beforeItemRemoveEvent.cancel)
  199.           return;
  200.  
  201.         $('.badge', self.$container).filter(function() { return $(this).data('item') === item; }).remove();
  202.         $('option', self.$element).filter(function() { return $(this).data('item') === item; }).remove();
  203.         if($.inArray(item, self.itemsArray) !== -1)
  204.           self.itemsArray.splice($.inArray(item, self.itemsArray), 1);
  205.       }
  206.  
  207.       if (!dontPushVal)
  208.         self.pushVal(self.options.triggerChange);
  209.  
  210.       // Remove class when reached maxTags
  211.       if (self.options.maxTags > self.itemsArray.length)
  212.         self.$container.removeClass('bootstrap-tagsinput-max');
  213.  
  214.       self.$element.trigger($.Event('itemRemoved',  { item: item, options: options }));
  215.     },
  216.  
  217.     /**
  218.      * Removes all items
  219.      */
  220.     removeAll: function() {
  221.       var self = this;
  222.  
  223.       $('.badge', self.$container).remove();
  224.       $('option', self.$element).remove();
  225.  
  226.       while(self.itemsArray.length > 0)
  227.         self.itemsArray.pop();
  228.  
  229.       self.pushVal(self.options.triggerChange);
  230.     },
  231.  
  232.     /**
  233.      * Refreshes the tags so they match the text/value of their corresponding
  234.      * item.
  235.      */
  236.     refresh: function() {
  237.       var self = this;
  238.       $('.badge', self.$container).each(function() {
  239.         var $tag = $(this),
  240.             item = $tag.data('item'),
  241.             itemValue = self.options.itemValue(item),
  242.             itemText = self.options.itemText(item),
  243.             tagClass = self.options.tagClass(item);
  244.  
  245.           // Update tag's class and inner text
  246.           $tag.attr('class', null);
  247.           $tag.addClass('badge ' + htmlEncode(tagClass));
  248.           $tag.contents().filter(function() {
  249.             return this.nodeType == 3;
  250.           })[0].nodeValue = htmlEncode(itemText);
  251.  
  252.           if (self.isSelect) {
  253.             var option = $('option', self.$element).filter(function() { return $(this).data('item') === item; });
  254.             option.attr('value', itemValue);
  255.           }
  256.       });
  257.     },
  258.  
  259.     /**
  260.      * Returns the items added as tags
  261.      */
  262.     items: function() {
  263.       return this.itemsArray;
  264.     },
  265.  
  266.     /**
  267.      * Assembly value by retrieving the value of each item, and set it on the
  268.      * element.
  269.      */
  270.     pushVal: function() {
  271.       var self = this,
  272.           val = $.map(self.items(), function(item) {
  273.             return self.options.itemValue(item).toString();
  274.           });
  275.  
  276.       self.$element.val(val, true);
  277.  
  278.       if (self.options.triggerChange)
  279.         self.$element.trigger('change');
  280.     },
  281.  
  282.     /**
  283.      * Initializes the tags input behaviour on the element
  284.      */
  285.     build: function(options) {
  286.       var self = this;
  287.  
  288.       self.options = $.extend({}, defaultOptions, options);
  289.       // When itemValue is set, freeInput should always be false
  290.       if (self.objectItems)
  291.         self.options.freeInput = false;
  292.  
  293.       makeOptionItemFunction(self.options, 'itemValue');
  294.       makeOptionItemFunction(self.options, 'itemText');
  295.       makeOptionFunction(self.options, 'tagClass');
  296.  
  297.       // Typeahead Bootstrap version 2.3.2
  298.       if (self.options.typeahead) {
  299.         var typeahead = self.options.typeahead || {};
  300.  
  301.         makeOptionFunction(typeahead, 'source');
  302.  
  303.         self.$input.typeahead($.extend({}, typeahead, {
  304.           source: function (query, process) {
  305.             function processItems(items) {
  306.               var texts = [];
  307.  
  308.               for (var i = 0; i < items.length; i++) {
  309.                 var text = self.options.itemText(items[i]);
  310.                 map[text] = items[i];
  311.                 texts.push(text);
  312.               }
  313.               process(texts);
  314.             }
  315.  
  316.             this.map = {};
  317.             var map = this.map,
  318.                 data = typeahead.source(query);
  319.  
  320.             if ($.isFunction(data.success)) {
  321.               // support for Angular callbacks
  322.               data.success(processItems);
  323.             } else if ($.isFunction(data.then)) {
  324.               // support for Angular promises
  325.               data.then(processItems);
  326.             } else {
  327.               // support for functions and jquery promises
  328.               $.when(data)
  329.                .then(processItems);
  330.             }
  331.           },
  332.           updater: function (text) {
  333.             self.add(this.map[text]);
  334.             return this.map[text];
  335.           },
  336.           matcher: function (text) {
  337.             return (text.toLowerCase().indexOf(this.query.trim().toLowerCase()) !== -1);
  338.           },
  339.           sorter: function (texts) {
  340.             return texts.sort();
  341.           },
  342.           highlighter: function (text) {
  343.             var regex = new RegExp( '(' + this.query + ')', 'gi' );
  344.             return text.replace( regex, "<strong>$1</strong>" );
  345.           }
  346.         }));
  347.       }
  348.  
  349.       // typeahead.js
  350.       if (self.options.typeaheadjs) {
  351.         // Determine if main configurations were passed or simply a dataset
  352.         var typeaheadjs = self.options.typeaheadjs;
  353.         if (!$.isArray(typeaheadjs)) {
  354.             typeaheadjs = [null, typeaheadjs];
  355.         }
  356.  
  357.         $.fn.typeahead.apply(self.$input, typeaheadjs).on('typeahead:selected', $.proxy(function (obj, datum, name) {
  358.           var index = 0;
  359.           typeaheadjs.some(function(dataset, _index) {
  360.             if (dataset.name === name) {
  361.               index = _index;
  362.               return true;
  363.             }
  364.             return false;
  365.           });
  366.  
  367.           // @TODO Dep: https://github.com/corejavascript/typeahead.js/issues/89
  368.           if (typeaheadjs[index].valueKey) {
  369.             self.add(datum[typeaheadjs[index].valueKey]);
  370.           } else {
  371.             self.add(datum);
  372.           }
  373.  
  374.           self.$input.typeahead('val', '');
  375.         }, self));
  376.       }
  377.  
  378.       self.$container.on('click', $.proxy(function(event) {
  379.         if (! self.$element.attr('disabled')) {
  380.           self.$input.removeAttr('disabled');
  381.         }
  382.         self.$input.focus();
  383.       }, self));
  384.  
  385.         if (self.options.addOnBlur && self.options.freeInput) {
  386.           self.$input.on('focusout', $.proxy(function(event) {
  387.               // HACK: only process on focusout when no typeahead opened, to
  388.               //       avoid adding the typeahead text as tag
  389.               if ($('.typeahead, .twitter-typeahead', self.$container).length === 0) {
  390.                 self.add(self.$input.val());
  391.                 self.$input.val('');
  392.               }
  393.           }, self));
  394.         }
  395.  
  396.       // Toggle the 'focus' css class on the container when it has focus
  397.       self.$container.on({
  398.         focusin: function() {
  399.           self.$container.addClass(self.options.focusClass);
  400.         },
  401.         focusout: function() {
  402.           self.$container.removeClass(self.options.focusClass);
  403.         },
  404.       });
  405.  
  406.       self.$container.on('keydown', 'input', $.proxy(function(event) {
  407.         var $input = $(event.target),
  408.             $inputWrapper = self.findInputWrapper();
  409.  
  410.         if (self.$element.attr('disabled')) {
  411.           self.$input.attr('disabled', 'disabled');
  412.           return;
  413.         }
  414.  
  415.         switch (event.which) {
  416.           // BACKSPACE
  417.           case 8:
  418.             if (doGetCaretPosition($input[0]) === 0) {
  419.               var prev = $inputWrapper.prev();
  420.               if (prev.length) {
  421.                 self.remove(prev.data('item'));
  422.               }
  423.             }
  424.             break;
  425.  
  426.           // DELETE
  427.           case 46:
  428.             if (doGetCaretPosition($input[0]) === 0) {
  429.               var next = $inputWrapper.next();
  430.               if (next.length) {
  431.                 self.remove(next.data('item'));
  432.               }
  433.             }
  434.             break;
  435.  
  436.           // LEFT ARROW
  437.           case 37:
  438.             // Try to move the input before the previous tag
  439.             var $prevTag = $inputWrapper.prev();
  440.             if ($input.val().length === 0 && $prevTag[0]) {
  441.               $prevTag.before($inputWrapper);
  442.               $input.focus();
  443.             }
  444.             break;
  445.           // RIGHT ARROW
  446.           case 39:
  447.             // Try to move the input after the next tag
  448.             var $nextTag = $inputWrapper.next();
  449.             if ($input.val().length === 0 && $nextTag[0]) {
  450.               $nextTag.after($inputWrapper);
  451.               $input.focus();
  452.             }
  453.             break;
  454.          default:
  455.              // ignore
  456.          }
  457.  
  458.         // Reset internal input's size
  459.         var textLength = $input.val().length,
  460.             wordSpace = Math.ceil(textLength / 5),
  461.             size = textLength + wordSpace + 1;
  462.         $input.attr('size', Math.max(this.inputSize, size));
  463.       }, self));
  464.  
  465.       self.$container.on('keypress', 'input', $.proxy(function(event) {
  466.          var $input = $(event.target);
  467.  
  468.          if (self.$element.attr('disabled')) {
  469.             self.$input.attr('disabled', 'disabled');
  470.             return;
  471.          }
  472.  
  473.          var text = $input.val(),
  474.          maxLengthReached = self.options.maxChars && text.length >= self.options.maxChars;
  475.          if (self.options.freeInput && (keyCombinationInList(event, self.options.confirmKeys) || maxLengthReached)) {
  476.             // Only attempt to add a tag if there is data in the field
  477.             if (text.length !== 0) {
  478.                self.add(maxLengthReached ? text.substr(0, self.options.maxChars) : text);
  479.                $input.val('');
  480.             }
  481.  
  482.             // If the field is empty, let the event triggered fire as usual
  483.             if (self.options.cancelConfirmKeysOnEmpty === false) {
  484.                 event.preventDefault();
  485.             }
  486.          }
  487.  
  488.          // Reset internal input's size
  489.          var textLength = $input.val().length,
  490.             wordSpace = Math.ceil(textLength / 5),
  491.             size = textLength + wordSpace + 1;
  492.          $input.attr('size', Math.max(this.inputSize, size));
  493.       }, self));
  494.  
  495.       // Remove icon clicked
  496.       self.$container.on('click', '[data-role=remove]', $.proxy(function(event) {
  497.         if (self.$element.attr('disabled')) {
  498.           return;
  499.         }
  500.         self.remove($(event.target).closest('.badge').data('item'));
  501.       }, self));
  502.  
  503.       // Only add existing value as tags when using strings as tags
  504.       if (self.options.itemValue === defaultOptions.itemValue) {
  505.         if (self.$element[0].tagName === 'INPUT') {
  506.             self.add(self.$element.val());
  507.         } else {
  508.           $('option', self.$element).each(function() {
  509.             self.add($(this).attr('value'), true);
  510.           });
  511.         }
  512.       }
  513.     },
  514.  
  515.     /**
  516.      * Removes all tagsinput behaviour and unregsiter all event handlers
  517.      */
  518.     destroy: function() {
  519.       var self = this;
  520.  
  521.       // Unbind events
  522.       self.$container.off('keypress', 'input');
  523.       self.$container.off('click', '[role=remove]');
  524.  
  525.       self.$container.remove();
  526.       self.$element.removeData('tagsinput');
  527.       self.$element.show();
  528.     },
  529.  
  530.     /**
  531.      * Sets focus on the tagsinput
  532.      */
  533.     focus: function() {
  534.       this.$input.focus();
  535.     },
  536.  
  537.     /**
  538.      * Returns the internal input element
  539.      */
  540.     input: function() {
  541.       return this.$input;
  542.     },
  543.  
  544.     /**
  545.      * Returns the element which is wrapped around the internal input. This
  546.      * is normally the $container, but typeahead.js moves the $input element.
  547.      */
  548.     findInputWrapper: function() {
  549.       var elt = this.$input[0],
  550.           container = this.$container[0];
  551.       while(elt && elt.parentNode !== container)
  552.         elt = elt.parentNode;
  553.  
  554.       return $(elt);
  555.     }
  556.   };
  557.  
  558.   /**
  559.    * Register JQuery plugin
  560.    */
  561.   $.fn.tagsinput = function(arg1, arg2, arg3) {
  562.     var results = [];
  563.  
  564.     this.each(function() {
  565.       var tagsinput = $(this).data('tagsinput');
  566.       // Initialize a new tags input
  567.       if (!tagsinput) {
  568.           tagsinput = new TagsInput(this, arg1);
  569.           $(this).data('tagsinput', tagsinput);
  570.           results.push(tagsinput);
  571.  
  572.           if (this.tagName === 'SELECT') {
  573.               $('option', $(this)).attr('selected', 'selected');
  574.           }
  575.  
  576.           // Init tags from $(this).val()
  577.           $(this).val($(this).val());
  578.       } else if (!arg1 && !arg2) {
  579.           // tagsinput already exists
  580.           // no function, trying to init
  581.           results.push(tagsinput);
  582.       } else if(tagsinput[arg1] !== undefined) {
  583.           // Invoke function on existing tags input
  584.             if(tagsinput[arg1].length === 3 && arg3 !== undefined){
  585.                var retVal = tagsinput[arg1](arg2, null, arg3);
  586.             }else{
  587.                var retVal = tagsinput[arg1](arg2);
  588.             }
  589.           if (retVal !== undefined)
  590.               results.push(retVal);
  591.       }
  592.     });
  593.  
  594.     if ( typeof arg1 == 'string') {
  595.       // Return the results from the invoked function calls
  596.       return results.length > 1 ? results : results[0];
  597.     } else {
  598.       return results;
  599.     }
  600.   };
  601.  
  602.   $.fn.tagsinput.Constructor = TagsInput;
  603.  
  604.   /**
  605.    * Most options support both a string or number as well as a function as
  606.    * option value. This function makes sure that the option with the given
  607.    * key in the given options is wrapped in a function
  608.    */
  609.   function makeOptionItemFunction(options, key) {
  610.     if (typeof options[key] !== 'function') {
  611.       var propertyName = options[key];
  612.       options[key] = function(item) { return item[propertyName]; };
  613.     }
  614.   }
  615.   function makeOptionFunction(options, key) {
  616.     if (typeof options[key] !== 'function') {
  617.       var value = options[key];
  618.       options[key] = function() { return value; };
  619.     }
  620.   }
  621.   /**
  622.    * HtmlEncodes the given value
  623.    */
  624.   var htmlEncodeContainer = $('<div />');
  625.   function htmlEncode(value) {
  626.     if (value) {
  627.       return htmlEncodeContainer.text(value).html();
  628.     } else {
  629.       return '';
  630.     }
  631.   }
  632.  
  633.   /**
  634.    * Returns the position of the caret in the given input field
  635.    * http://flightschool.acylt.com/devnotes/caret-position-woes/
  636.    */
  637.   function doGetCaretPosition(oField) {
  638.     var iCaretPos = 0;
  639.     if (document.selection) {
  640.       oField.focus ();
  641.       var oSel = document.selection.createRange();
  642.       oSel.moveStart ('character', -oField.value.length);
  643.       iCaretPos = oSel.text.length;
  644.     } else if (oField.selectionStart || oField.selectionStart == '0') {
  645.       iCaretPos = oField.selectionStart;
  646.     }
  647.     return (iCaretPos);
  648.   }
  649.  
  650.   /**
  651.     * Returns boolean indicates whether user has pressed an expected key combination.
  652.     * @param object keyPressEvent: JavaScript event object, refer
  653.     *     http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
  654.     * @param object lookupList: expected key combinations, as in:
  655.     *     [13, {which: 188, shiftKey: true}]
  656.     */
  657.   function keyCombinationInList(keyPressEvent, lookupList) {
  658.       var found = false;
  659.       $.each(lookupList, function (index, keyCombination) {
  660.           if (typeof (keyCombination) === 'number' && keyPressEvent.which === keyCombination) {
  661.               found = true;
  662.               return false;
  663.           }
  664.  
  665.           if (keyPressEvent.which === keyCombination.which) {
  666.               var alt = !keyCombination.hasOwnProperty('altKey') || keyPressEvent.altKey === keyCombination.altKey,
  667.                   shift = !keyCombination.hasOwnProperty('shiftKey') || keyPressEvent.shiftKey === keyCombination.shiftKey,
  668.                   ctrl = !keyCombination.hasOwnProperty('ctrlKey') || keyPressEvent.ctrlKey === keyCombination.ctrlKey;
  669.               if (alt && shift && ctrl) {
  670.                   found = true;
  671.                   return false;
  672.               }
  673.           }
  674.       });
  675.  
  676.       return found;
  677.   }
  678.  
  679.   /**
  680.    * Initialize tagsinput behaviour on inputs and selects which have
  681.    * data-role=tagsinput
  682.    * zmm2113@qq.com 2018.6.24
  683.    */
  684.   $(function() {
  685.     $("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();
  686.   });
  687. })(window.jQuery);

JQ input输入框回车生成标签，可删除，并获取标签的值的更多相关文章

  1. input输入框回车事件响应

    1.常用方法 1.方法1$('#applyCertNum').bind('keypress',function(event){ if(event.keyCode == 13) { alert('你输入 ...

  2. element-ui input输入框回车事件

    <el-input maxlength="30" v-model="answerInput" @keyup.enter.native="addA ...

  3. 微信小程序：input输入框和form表单几种传值和取值方式

    1.传值:index下标传值.页面navigator传值 1.index下标 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.data ...

  4. k8s kubernetes给node节点添加标签和删除node节点标签

    node节点IP 192.168.1.205 给节点添加标签的命令 添加label语法 kubectl label nodes <node-name> <label-key>= ...

  5. input输入框和 pure框架中的 box-sizing 值问题

    在使用pureCSS框架的时候,遇到一个问题. input输入框,我给他们设置了宽度和padding值,我发现,在火狐和谷歌上面发现,增加padding值并不会影响最终的宽度,而在IE6 7下则会影响 ...

  6. jquery获取标签内容，编辑内容

    一.获取页面元素 三种方式获取页面中元素的内容. input标签使用:.val()获取 标签下的html及文本内容:.html() 仅获取标签下的纯文本内容:.text() <head> ...

  7. jQuery输入框回车添加标签特效

    效果如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  8. 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

    编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...

  9. jQuery动态添加、删除按钮及input输入框

    输入框的加减实现: <html> <head> <meta charset="utf-8"> <title>动态创建按钮</t ...

随机推荐

  1. generator 和 co模块

    // 类数组的生成器 // 类数组的生成器 function fns() { let obj = {0:1,1:2,2:3,length: 3}, [Symbol.iterator]: functio ...

  2. Magicodes.IE基础教程之导出Pdf

    原文作者:hueifeng 说明 本教程主要说明如何使用Magicodes.IE.Pdf完成Pdf收据导出 要点 导出PDF数据 自定义PDF模板 导出单据 如何批量导出单据 导出特性说明 PdfEx ...

  3. 【React Native】使用react-native-wechat 进行微信好友、微信朋友圈进行分享

    前提:微信平台注册,请自行百度.本篇主要是针对react native中使用react-native-wechat进行android端的分享. 1.Android版本安装配置方法 在android/s ...

  4. Shiro -- (二) 身份验证基本流程

    简介: 在 shiro 中,用户需要提供 principals (身份)和 credentials(证明)给 shiro,从而应用能验证用户身份: principals:身份,即主体的标识属性,可以是 ...

  5. jQuery的核心功能选择器

    选择器是jquery的核心 jquery选择器返回的对象是jquery对象,不会返回undefined或者null,因此不必进行判断 基本选择器: ID选择器  $("#ID") ...

  6. STM32存储器映射和寄存器映射

    存储器映射 对于Cortex-M3来讲,有一块4G大小的存储器空间.存储器映射指的是芯片厂商为这个空间分配地址的操作.这4G空间被均匀地划分为8个大小为512MB的存储块(block),并且每个块都各 ...

  7. Python 编程入门（1）：基本数据类型

    以下所有例子都基于最新版本的 Python,为了便于消化,每一篇都尽量短小精悍,希望你能尽力去掌握 Python 编程的「概念」,可以的话去动手试一下这些例子(就算目前还没完全搞懂),加深理解. 程序 ...

  8. Vue整合d3.v5.js制作--柱状图(rect)

    先上效果图: 图中柱状图变成纯蓝色是鼠标滑动过的颜色(颜色可改,本人配色能力十分的强,建议直接用默认设置即可 ( ᖛ ̫ ᖛ )ʃ)) 1.环境说明 Vue版本:"vue": &q ...

  9. java动态拼接sql语句并且执行时给sql语句的参数赋值

    问题 在这里举一个例子,比如我要做一个多条件模糊查询,用户输入的时候有可能输入一个条件,也有可能输入两个条件,这时执行查询的sql语句就不确定了,但可以用动态拼接sql语句来解决这个问题. 解决方法 ...

  10. postman界面按钮

    Inport:导入,直接导入postman请求集或请求文件 Runner: 执行请求,选择执行请求的collection,并且添加执行参数,例如执行时间,执行次数 History: 所有调试的历史请求 ...