Press "Enter" to skip to content

Input Tag Editor In Vanilla JavaScript | Tagger

Tagger is a vanilla JavaScript tag editor. This plugin is a small but full-featured JS tagging system that enables the user to insert tags into the input field.

How to make use of it:

To use the tagging system, place the Tagger’s JavaScript and Stylesheet within the HTML doc.

<link href="tagger.css" rel="stylesheet">
<script src="tagger.js"></script>

Create a normal input field for the tagging system.

<input type="text" name="tags" />

Initialize the Tagger on the input field and executed it.

tagger(document.querySelector('[name="tags"]'));

Determine whether to allow white areas within the tags.

tagger(document.querySelector('[name="tags"]'), {
  allow_spaces: true
});

Determine whether or not to permit duplicate tags.

tagger(document.querySelector('[name="tags"]'), {
  allow_duplicates: false
});

Specify what must be within the href attribute.

tagger(document.querySelector('[name="tags"]'), {
  link: function(name) {
    return `javascript:alert('${name}');`;
  }
});

Add/take away a tag programmatically.

instance.add_tag('example')
instance.remove_tag('example')

Minimal Tagging Input, Tiny Text Field Based Tags Input Plugin, Tagger Plugin/Github


See Demo And Download

Official Website(jcubic): Click Here

This superior jQuery/javascript plugin is developed by jcubic. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *