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. - Using preact? (or react?) There's a wrapper called preact-token-input
- Works in modern browsers and IE10+
Screenshot:
It's easy to use! In addition to the example code, you'll also need to
include tags-input.css - I didn't bundle it because that's a bit gross.
CommonJS:
var tagsInput = require('tags-input'); // create a new tag input: var tags = 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:
<link rel="stylesheet" href="tags-input.css"> <script src="tags-input.js"></script> <form> <label> Add some <input name="hashtags" type="tags" pattern="^#" placeholder="#hashtags"> </label> </form> <script>[].forEach.call(document.querySelectorAll('input[type="tags"]'), tagsInput);</script>