Vanilla JavaScript Tag Input with CSS

The “simple-tags” is a modest Vanilla JavaScript plugin that allows you to create tag input. This pure JS tags input plugin useful to insert new tags, remove tags and display predefined tag in a HTML container. Besides this, you can also style tags field with additional CSS according to your needs.

JavaScript Tag Input Overview and Preview

Plugin: simple-tags
Author: kurtobando
Category: Text & Input
Published: November 7, 2019
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 6 KB
Dependencies: No dependency!
Last Modified:
MIT
96 views

Code Rating

0
0.0 rating
0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%

How to Create JavaScript Tag Input

1. After downloading, include plugin’s CSS and Js file in your web project.

<!-- simple-tags CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- simple-tags JS -->
<script src="js/script-min.js"></script>

2. Now, create HTML div element with class name simple-tags and place some tags (if you want to display predefined) in data-tags jut like below:

<div class="simple-tags"
     id="container" 
     data-simple-tags="CodeHim, HTML, CSS, JavaScript, jQuery, Bootstrap">
</div>

3. Finally, get the container element by id in JavaScript and call the plugin with it to active tags input.

<script>
var el = document.getElementById('container');
new Tags(el);
<\script>

Changelog

7/11/2019

  • Minor update index.html

1/11/2019

  • Initial release.
No Configurations Options.

There are no reviews yet. Be the first one to write one.

Submit Your Review