Author: | rintosarkar |
---|---|
Views Total: | 4,679 views |
Official Page: | Go to website |
Last Update: | January 17, 2020 |
License: | MIT |
Preview:

Description:
Tagplug is a small JavaScript plugin that turns a regular text field into an easy-to-style tags input.
To insert a new tag into the input, type something and then press the Enter or Comma key.
It also has the ability to prevent typing the duplicate tag.
How to use it:
Create a normal input field on the page.
<input type="text" id="tag-input">
Load the main JavaScript file at the end of the document.
<script src="index.js"></script>
Initialize the Tagplug plugin on the input field and done.
var tagInput = new TagsInput({ selector: 'tag-input' });
The example CSS to style the tags input.
.tags-input-wrapper { background: #f9f9f9; padding: 10px; border-radius: 4px; max-width: 400px; border: 1px solid #ccc } .tags-input-wrapper input { border: none; background: transparent; outline: none; width: 150px; } .tags-input-wrapper .tag { display: inline-block; background-color: #009432; color: white; border-radius: 40px; padding: 0px 3px 0px 7px; margin-right: 5px; margin-bottom: 5px; } .tags-input-wrapper .tag a { margin: 0 7px 3px; display: inline-block; cursor: pointer; }
Specify the maximum number of tags allowed to type in the input. Default: no limit.
var tagInput = new TagsInput({ selector: 'tag-input', max: 10 });
Enable/disable duplicate detection. Default: false.
var tagInput = new TagsInput({ selector: 'tag-input', duplicate: true });
Default CSS classes.
var tagInput = new TagsInput({ wrapperClass : 'tags-input-wrapper', tagClass : 'tag' });
Add tags to the tags input programmatically.
tagInput.addData(["CSS","Script",".Com"])
Changelog:
01/17/2020
- Update index.js
Actually “duplicate: true” will not activate duplicate detection but quite the opposite, it will allow duplicates. So to stop duplicates you would need to use “duplicate: false”
hello, when i use the comma separator, it split, but the coma still apears and i need to erase it for continue put a new tag. Do you check it?