Tag field
A library to create a field which supports tags
const tagFieldContainer = document.querySelector("#tagFieldContainer");
const editor = TagField({
container: tagFieldContainer,
});
editor.on("tags_change", list => console.log("Tag list changed", list));
You can also use EdmailEditor which support all parameters from TagField and additionally email validation.
const editor = EmailEditor({
container: emailEditorContainer,
});
The full options list will look like:
const editor = TagField({
container: tagFieldContainer,
isValidTag: (tag) => tag.length > 5,
delimiters: [",", " "],
placeholder = "add more people...",
});
You can download files from dist folder, and you need to include link to css and js files in your HTML page.
<head>
<link rel="stylesheet" href="${path-to-library}/tag-field.css"></script>
<head>
<body>
<!-- main conttent -->
<script src="${path-to-library}/tag-field.js"></script>
<script>
TagField({
container: document.querySelector("#tag-field"),
});
</script>
</body>
container: document.querySelector('#tag-field')
Dom element which will be parent for tag-field
delimiters: [","]
List of delimiters, after type each of them the tag will be created. Or when you paste string like 'tag, tag2', it will be parsed into 2 tags ["tag1", "tag2"]
. Default: [" ", ",", ";"]
placeholder: "Add some tags"
Text for input placeholder. Default: add more people...
isValidTag: (tag) => tag.length > 5
Function which check that tag valid or not. Default: return true
After you create a tag-field, you can dynamicly control the bejaviour
const editor = TagField({
container: emailEditorContainer,
});
editor.getTags() // ["tag1", "tag2", "[email protected]"]
Get list of all tags, return array of string
.
editor.getAllValidTags() // ["[email protected]""]
Get list of all valid tags, return array of string
.
editor.setTagList(["tag2", "tag4"])
editor.addTag("tag5")
Add a new tag to the list. If you try to add a tag that already exists in the list, it will not be added.
editor.removeTag("tag5")
Remove tag by value from the list.
editor.removeLastTag(")
Remove last tag from the list.
Now we only support subscribe on change of the list:
editor.on("tags_change", list => console.log("Tag list changed", list));
editor.on("tags_change", list => doSomeWork(list));