- Notifications
You must be signed in to change notification settings - Fork47
🔖 <input type="tags"> like magic
License
NotificationsYou must be signed in to change notification settings
developit/tags-input
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Features:
- I said
<input type="tags">should be a thing. - With full keyboard, mouse and focus support.
- Works with HTML5
patternandplaceholderattributes, too! - Native
changeandinput("live" change) events. - Usingpreact? (or react?) There's a wrapper calledpreact-token-input
- Works in modern browsers and IE10+
Screenshot:
It's easy to use! In addition to the example code, you'll also need toincludetags-input.css - I didn't bundle it because that's a bit gross.
CommonJS:
vartagsInput=require('tags-input');// create a new tag input:vartags=document.createElement('input');tags.setAttribute('type','tags');tagsInput(tags);document.body.appendChild(tags);// enhance an existing input:tagsInput(document.querySelector('input[type="tags"]'));// or just enhance all tag inputs on the page:[].forEach.call(document.querySelectorAll('input[type="tags"]'),tagsInput);
HTML Example:
<linkrel="stylesheet"href="tags-input.css"><scriptsrc="tags-input.js"></script><form><label>Add some<inputname="hashtags"type="tags"pattern="^#"placeholder="#hashtags"></label></form><script>[].forEach.call(document.querySelectorAll('input[type="tags"]'),tagsInput);</script>
About
🔖 <input type="tags"> like magic
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors5
Uh oh!
There was an error while loading.Please reload this page.