Simple jQuery Plugin For Handling Input Of Tags - Input Tags

File Size: 194 KB
Views Total: 5591
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple jQuery Plugin For Handling Input Of Tags - Input Tags

Input Tags is a jQuery based tagging system which automatically converts the values of the input into delimited tags.


  • Separates tags with a specific character ( default: comma)
  • Allows to set the max/mum sizes of tags.
  • Allow or disallow space.
  • Duplicate tags validation.
  • Easy to customize via SCSS and JavaScript.

How to use it:

1. Load the core style sheet jquery.tags.input.css in the header of the document.

<link href="jquery.tags.input.css" rel="stylesheet">

2. Create input fields and wrap them into a DIV container as follows:

<div class="jQueryInputTags">
  <input type="text" placeholder="Type something">
  <input type="hidden">

3. With Pre-populated tags:

<div class="jQueryInputTags">
  <input type="text" placeholder="Type something">
  <input type="hidden" value="jquery,css,html">

4. Call the function on the container and done.


5. Config the plugin with the following options.

  maxTotalSize: 255,
  maxTagSize: 10,
  minTagSize: 3,
  chars: /[,:]/,
  keycode: /(^9$|^13$|^32)/, // Tab, Enter, Space
  separator: ',',
  sensitive: false,
  clearSpaces: true

Change log:


  • Event handling and ability to custom style tag


  • Bugfix


  • Change delete event from keyup to keydown in order to match length validation


  • Added support for focusout; added better tab support


  • Adding Sensitive Case and ClearSpace Options

This awesome jQuery plugin is developed by Papacidero. For more Advanced Usages, please check the demo page or visit the official website.