Add Simple Basic Tags HTML Input Field In Vanilla JavaScript

A tags input is a user interface (UI) component that allows the user to add or insert multiple entries as tags into an input field. In this project (Tags Input in JavaScript), as you can see on the webpage, there is an input box with some tags, buttons, and tags counters.

You can remove each tag by clicking on a close icon or remove all tags at once by clicking on the Remove All button. You can insert a maximum of the limit of tags only and duplicate tags won’t be added in the input field or both are in your control.

Well, this is a vanilla JavaScript-based tags input component that stores the typed tags in a hidden input field. Type something in the input and then press Enter or Comma key to add a new tag. Click the X button or press the Backspace button 2 times to delete the tag.

There are many code snippets available online or on many other blogs and websites but everyone is not able to optimize your blog or website so you need some optimized code snippet. So now checkout out the code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.

Features:

1. Light Weight.
2. Pure Vanilla JavaScript.
3. Cross Browser.
4. No External Files.
5. Full Customizable.
6. Max Tags Limit Set.
7. Duplicate Tag Control.
8. Pre-Filled Tag Set.
9. Different Options On Multiple-Tabs On Single Page.

How To Add Simple Basic Tags HTML Input Field In Vanilla JavaScript?

There are a few easy and understandable steps to achieve your desired functionality using pure Vanilla JavaScript that we are gonna share below. Follow each step perfectly.

CSS:

<style>
#tags {
margin: 100px auto 0 auto;
max-width: 600px;
border: 1px solid #cccccc7a;
padding: 5px;
}
#tags .tag {
position: relative;
display: block;
float: left;
color: #FFFFFF;
background: #8cce0c;
padding: 5px 20px 5px 5px;
margin: 4px;
border-radius: 2px;
font-size: 12px;
line-height: 12px;
transition: all 0.3s ease-in-out;
}
#tags .tag .close {
position: absolute;
top: 0;
right: 0;
width: 14px;
height: 100%;
background: #75ac0a;
cursor: pointer;
border-radius: 0 2px 2px 0;
transition: background 0.3s;
}
#tags .tag .close:after {
position: absolute;
content: "X";
top: 6px;
left: 3px;
font-weight: 900;
}
#tags .tag .close:hover {
background: rgba(215, 65, 70, 0.87);
}
#tags input {
border: 0;
margin: 4px;
padding: 3px 7px 3px 0;
width: auto;
outline: none;
}
</style>

HTML:

<div id="tags">
<input type="text" id="add_tag" placeholder="Add a tag......">
</div>

JavaScript:

<script>
function inputTags(configs) {

let input = document.getElementById(configs.id),
tagsContainer = document.getElementById("tags");

let _privateMethods = {

init : function (configs) {

// this.inspectConfigProperties(configs);

let self = this,
input_hidden = document.createElement('input');
input_hidden.setAttribute('type', 'hidden');
input_hidden.setAttribute('id', 'tagInput');
input_hidden.setAttribute('name', 'tagInput');
input.parentNode.insertBefore(input_hidden, input);

tagsContainer.addEventListener('click', function () {
input.focus();
});

if(configs.tags)
{
for (let i = 0; i < configs.tags.length; i++)
{
this.create(configs.tags[i].replace(/[^a-z0-9\+\-\.\#]/ig, '').toUpperCase());
}
}

input.addEventListener("focusout", function () {

let tag_txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''),
tag_exists = Boolean(self.tags_array.indexOf(tag_txt) + 1);

if(tag_txt && tag_exists && !configs.allowDuplicateTags)
{
self.showDuplicate(tag_txt);
}
else if(tag_txt && tag_exists && configs.allowDuplicateTags)
{
self.create(tag_txt);
}
else if(tag_txt && !tag_exists)
{
self.create(tag_txt);
}
this.value = "";

});

input.addEventListener('keyup', function (ev) {

if(/(188|13)/.test(ev.which))
{
let event = new Event('focusout');
input.dispatchEvent(event);
}
if(event.which===8 && input.value === "")
{
let tag_nodes = document.querySelectorAll('.tag');
if(tag_nodes.length > 0)
{
input.addEventListener('keyup', function (event) {
if(event.which===8){
let node_to_del = tag_nodes[tag_nodes.length - 1];
node_to_del.remove();
self.update();
}
});
}
}
});
},

create : function(tag_txt){

let tag_nodes = document.querySelectorAll('.tag');

if(tag_nodes.length < configs.maxTags)
{
let self = this,
span_tag = document.createElement('span'),
input_hidden_field = document.getElementById("tagInput");

span_tag.setAttribute('class', 'tag');
span_tag.innerText = tag_txt.toUpperCase();

let span_tag_close = document.createElement('span');
span_tag_close.setAttribute('class', 'close');
span_tag.appendChild(span_tag_close);

tagsContainer.insertBefore(span_tag, input_hidden_field);

span_tag.childNodes[1].addEventListener('click', function () {
self.remove(this);
});

this.update();

}
},

update : function(){

let tags = document.getElementsByClassName('tag'),
tags_arr = [];

for(let i =0; i < tags.length; i++)
{
tags_arr.push(tags[i].textContent.toLowerCase());
}
this.tags_array = tags_arr;

document.getElementById("tagInput").setAttribute('value', tags_arr.join());
},

remove : function(tag) {
configs.onTagRemove(tag.parentNode.textContent);
tag.parentNode.remove();
this.update();
},

showDuplicate : function (tag_value) {
let tags = document.getElementsByClassName('tag');

for(let i =0; i < tags.length; i++)
{
if(tags[i].textContent === tag_value.toUpperCase())
{
tags[i].style.background = '#636363d9';
window.setTimeout(function () {
tags[i].removeAttribute('style');
}, 1100);
}
}
}
}

_privateMethods.init(configs);
// return false;
}
//////////////////////
// Tag Setting Options
//////////////////////
new inputTags({
id: 'add_tag',
tags : ['exeideas', 'dot', 'com'],
maxTags : 20,
allowDuplicateTags : false,
onTagRemove : function (tag) {
alert( tag + "Tag is going to be removed");
},
});</script>

Customization:

No need to customize it. Just copy-paste. Rest edit the code as per comments and need. Go to the last part of JavaScript to control your options for specific input fields by making a copy to the options set.

Troubleshooting the Errors

Do it with concentration and patience. Check your alls steps and again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.

Final Words:

That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us or If you have any doubts and problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy development, See you in the next article.