@pirxpilot/tags-input

HTML input component that allows for simplified adding and removing tags, emails, urls etc. Click here to see the demo.

This is a fork of tags-input project with some additional features:

• configurable tag separator - through data-separator
• various input types like email, phone, or url
• can be used with browserify (possible other bundlers)

Features of tags-input are also supported:

• full keyboard, mouse and focus support
• works with HTML5 pattern, placeholder, autocomplete etc.
• native change and input ("live" change) events
• works in modern browsers and IE10+

Options

Component can be configured through dataset attributes:

• data-separator - string containing one or more characters that will be used as separators
• data-allow-duplicates - if set to truthy value input will not automatically remove duplicated tags

Usage

tags-input.css can be used for basic styling

<form>
	<label for='simple'>Simple</label>
	<input id='simple' type='text'>
	<label for='email'>Email</label>
	<input id='email' type='email' data-separator=' ,;' placeholder="space, comma, or semicolon">
	<label for='url'>URL</label>
	<input id='url' type='url' data-separator=' '>
</form>
<script type="text/javascript">
	var tagsInput = require('@pirxpilot/tags-input');
	for (let input of document.querySelectorAll('form input')) {
		tagsInput(input);
	}
</script>

More detailed example can be found in index.html

License

MIT Copyright (c) 2014 Jason Miller