tags-input

Features:

• I said <input type="tags"> should be a thing.
• With full keyboard, mouse and focus support.
• Works with HTML5 pattern and placeholder attributes, too!
• Native change and input ("live" change) events.
• Using preact? (or react?) There's a wrapper called preact-token-input
• Works in modern browsers and IE10+

Screenshot:

JSFiddle Demo

---

Examples

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:

1var tagsInput = require('tags-input');
2
3// create a new tag input:
4var tags = document.createElement('input');
5tags.setAttribute('type', 'tags');
6tagsInput(tags);
7document.body.appendChild(tags);
8
9// enhance an existing input:
10tagsInput(document.querySelector('input[type="tags"]'));
11
12// or just enhance all tag inputs on the page:
13[].forEach.call(document.querySelectorAll('input[type="tags"]'), tagsInput);

HTML Example:

1<link rel="stylesheet" href="tags-input.css">
2<script src="tags-input.js"></script>
3
4<form>
5	<label>
6		Add some
7		<input name="hashtags" type="tags" pattern="^#" placeholder="#hashtags">
8	</label>
9</form>
10
11<script>[].forEach.call(document.querySelectorAll('input[type="tags"]'), tagsInput);</script>