Skip to content

prvn3294/tags-input

This branch is up to date with developit/tags-input:master.

Folders and files

NameName
Last commit message
Last commit date
Nov 24, 2016
Aug 24, 2015
Jun 16, 2016
Nov 8, 2014
Aug 23, 2015
Aug 24, 2015
Nov 8, 2014
May 27, 2016
Aug 24, 2015
Nov 25, 2016
Jun 16, 2016
Apr 29, 2016
Apr 29, 2016
Jun 16, 2016
Jun 16, 2016

Repository files navigation

tags-input

NPM Version Bower Version Gitter Room

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:

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:

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>

About

🔖 <input type="tags"> like magic

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 77.0%
  • CSS 12.9%
  • HTML 10.1%