Features:
- I said
<input type="tags">
should be a thing. - With full keyboard, mouse and focus support.
- Works with HTML5
pattern
andplaceholder
attributes, too! - Native
change
andinput
("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>