Simplest jQuery Tags Input Plugin - tags
File Size: | 10.2 KB |
---|---|
Views Total: | 2798 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Just another jQuery tags input plugin that converts any words into tags in a text field. Type some tags in the input field, and separate them with Enter, SPACE, or Comma.
Features:
- Add the tag to tags list by check the key pressed.
- Add the tag after checking the value and refresh the display if it was successfully added.
- Check if the value is already contained in the input. If the tag is already container, the plugin highlights it for 0.5s.
- Get each tag value with val() method.
How to use it:
1. Add jQuery library and the jQuery tags plugin into your html page.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="tags.js"></script>
2. To enable the plugin, just add the data-role="tagsinput"
attribute to the input field.
<input id="input-tag" type="text" data-role="tagsinput">
3. The sample CSS to style the tags & input field.
.my-tagsinput { font-size: 75%; font-weight: 700%; font-family: 'Open Sans', sans-serif; border: 1px solid #D8D8D8; border-radius: 0.4em 0.4em 0.4em 0.4em; padding: 0.2em 0.3em 0.2em 0.3em; margin: 0.4em 0em 0.4em 0em; cursor: text; } .my-tagsinput input { border: none; box-shadow: none; outline: none; padding: 0; margin: 0; max-width: inherit; } .tag { background-color: #2E9AFE; margin: 0em 0.2em 0em 0.2em; padding: 0em 0.5em 0em 0.5em; border-radius: 0.2em 0.2em 0.2em 0.2em; color: white; cursor: auto; } .remove { margin-left: 0.4em; font-weight: bold; cursor: pointer; }
4. You can then access the value of the input with the .val ()
method.
This awesome jQuery plugin is developed by Remi-Laot-CreiZyz. For more Advanced Usages, please check the demo page or visit the official website.