@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><labelfor='simple'>Simple</label><inputid='simple' type='text'><labelfor='email'>Email</label><inputid='email' type='email' data-separator=' ,;' placeholder="space, comma, or semicolon"><labelfor='url'>URL</label><inputid='url' type='url' data-separator=''></form><scripttype="text/javascript">vartagsInput=require('@pirxpilot/tags-input');for(letinputofdocument.querySelectorAll('form input')){tagsInput(input);}</script>

More detailed example can be found in index.html

License

MIT Copyright (c) 2014 Jason Miller