https://github.com/developit/tags-input

:bookmark: <input type="tags"> like magic
https://github.com/developit/tags-input

dom dom-components input input-method tag tag-input tagging

Last synced: 5 days ago
JSON representation

:bookmark: <input type="tags"> like magic

• Host: GitHub
• URL: https://github.com/developit/tags-input
• Owner: developit
• License: mit
• Created: 2015-01-08T22:27:31.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2019-10-02T21:55:38.000Z (about 5 years ago)
• Last Synced: 2024-10-17T13:58:31.048Z (17 days ago)
• Topics: dom, dom-components, input, input-method, tag, tag-input, tagging
• Language: JavaScript
• Homepage: http://jsfiddle.net/developit/d5w4jpxq/
• Size: 36.1 KB
• Stars: 328
• Watchers: 10
• Forks: 47
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
tags-input

==========

[![NPM Version](http://img.shields.io/npm/v/tags-input.svg?style=flat)](https://www.npmjs.org/package/tags-input)

[![Bower Version](http://img.shields.io/bower/v/tags-input.svg?style=flat)](http://bower.io/search/?q=tags-input)

[![Gitter Room](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/developit/tags-input)

**Features:**

- I said `` should be a thing.

- With full keyboard, mouse and focus support.

- Works with HTML5 `pattern` and `placeholder` attributes, too!

- Native [`change`](https://developer.mozilla.org/en-US/docs/Web/Events/change) and [`input`](https://developer.mozilla.org/en-US/docs/Web/Events/input) _("live" change)_ events.

- Using [preact](https://github.com/developit/preact)? (or react?) There's a wrapper called [preact-token-input](https://github.com/developit/preact-token-input)

- Works in modern browsers and IE10+

**Screenshot:**

> ![screenshot](http://cl.ly/image/3M3U1h1s2y0v/tags-screenshot.png)

[JSFiddle Demo](http://jsfiddle.net/developit/d5w4jpxq/)

---

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:**

```js

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:**

```html

	

		Add some

		

	

[].forEach.call(document.querySelectorAll('input[type="tags"]'), tagsInput);

```