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: 5 months ago
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 6 KB
Dependencies: No dependency!
Last Modified:
MIT
641

Code Rating

[site_reviews_summary assigned_to=”post_id”]

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.
[site_reviews assigned_to=”post_id”]

Submit Your Review

[site_reviews_form assign_to=”post_id”]