Tags Input

Developer
Julien Dargelos
Size
4,202 Kb
Views
18,216
  1. Tags Input Previews
  2. Tags Input HTML Codes
  3. Tags Input CSS Codes
  4. Tags Input JS Codes

How do I make an tags input?

What is a tags input? How do you make a tags input? This script and codes were developed by Julien Dargelos on 29 November 2022, Tuesday.

Tags Input Previews
IQ Test

Tags Input - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tags Input</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main> <p>Separate your tags with a comma</p> <div class="tags-input"></div> <h1><span>Tags</span> Input</h1>
</main> <script src="js/index.js"></script>
</body>
</html>

Tags Input - Script Codes CSS Codes

html, body, main { height: 100%;
}
main { max-width: 500px; margin: 0 auto; padding: 0 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
h1 { margin-bottom: 20px; font-size: 20px; font-weight: 300; text-align: center; text-transform: uppercase; letter-spacing: 5px; color: #bbb;
}
h1 span { border: 2px solid #dfdfdf; padding: 3px 2px 3px 7px; border-radius: 6px; font-weight: 400;
}
p { margin-top: 10px; font-size: 10px; font-weight: bold; color: #71ccd5; text-align: center; text-transform: uppercase; letter-spacing: 1px;
}
.tags-input { border: 2px solid #dfdfdf; border-radius: 40px; height: 40px; padding: 0 11px; font-size: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; color: #888;
}
.tags-input span { background: #bbb; margin-right: 7px; color: #fff; padding: 4px 7px; border-radius: 20px;
}
.tags-input span[data-selected] { background: #71ccd5;
}
.tags-input::after { content: ""; background: #888; width: 1px; height: 19px; margin: -1px 0 0 -1px; display: none; -webkit-animation: blink 0.5s infinite alternate; animation: blink 0.5s infinite alternate;
}
.tags-input:focus { border-color: #71ccd5; outline: none;
}
.tags-input:focus[data-cursor]::after { display: block;
}
@media screen and (max-width: 736px) { .tags-input:focus[data-cursor]::after { display: none; }
}
.tags-input:focus + h1 { color: #71ccd5;
}
.tags-input:focus + h1 span { border-color: #71ccd5;
}
@-webkit-keyframes blink { 0% { opacity: 1; } 49% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes blink { 0% { opacity: 1; } 49% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; }
}

Tags Input - Script Codes JS Codes

var TagsInput = function(element) { var self = this; var initChar = "\u200B"; var initCharPattern = new RegExp(initChar, 'g'); var insert = function(element) { if(self.textNode) self.element.insertBefore(element, self.textNode); else self.element.appendChild(element); }; var updateCursor = function() { self.cursor = self.blank; }; var keydown = function(event) { if(event.keyCode == 188) { event.preventDefault(); setTimeout(function() { var text = self.text; if(text) { self.text = initChar; self.add(text); } }, 1); } else if(event.keyCode == 8) { if(self.text.replace(initCharPattern, '') == '') { self.text = initChar+initChar; if(self.selected) { self.element.removeChild(self.selected); } else { var tags = self.tags; var keys = Object.keys(tags) if(keys.length > 0) { var tag = tags[keys[keys.length-1]]; tag.setAttribute('data-selected', ''); } } } } if(event.keyCode !== 8) { if(self.selected) self.selected.removeAttribute('data-selected'); } setTimeout(function() { updateCursor(); }, 1); }; var focus = function() { updateCursor(); }; Object.defineProperties(this, { element: { get: function() { return element; }, set: function(v) { if(typeof v == 'string') v = document.querySelector(v); element = v instanceof Node ? v : document.createElement('div'); if(!element.className.match(/\btags-input\b/)) element.className += ' tags-input'; if(element.getAttribute('contenteditable') != 'true') element.setAttribute('contenteditable', 'true'); element.removeEventListener('keydown', keydown); element.addEventListener('keydown', keydown); element.removeEventListener('focus', focus); element.addEventListener('focus', focus); this.text = initChar; } }, tags: { get: function() { var element; var elements = this.element.querySelectorAll('span'); var tags = {}; for(var i = 0; i < elements.length; i++) { element = elements[i] tags[element.innerText] = element; } return tags; } }, lastChild: { get: function() { return this.element.lastChild; } }, textNode: { get: function() { return this.element.lastChild instanceof Text ? this.element.lastChild : null; } }, text: { get: function() { return this.textNode ? this.textNode.data : null; }, set: function(v) { if(!this.textNode) this.element.appendChild(document.createTextNode(',')); this.textNode.data = v; }, }, cursor: { get: function() { return this.element.getAttribute('data-cursor') !== null; }, set: function(v) { if(v) this.element.setAttribute('data-cursor', ''); else this.element.removeAttribute('data-cursor'); } }, focused: { get: function() { return document.activeElement == this.element; } }, blank: { get: function() { return this.text.replace(initCharPattern, '') == ''; } }, selected: { get: function() { return this.element.querySelector('span[data-selected]'); } } }); this.add = function(tag) { tag = tag.replace(initCharPattern, ''); tag = tag.replace(/^\s+/, '').replace(/\s+$/, ''); tag = tag[0].toUpperCase()+tag.toLowerCase().slice(1); if(tag != '' && this.tags[tag] === undefined) { var element = document.createElement('span'); element.appendChild(document.createTextNode(tag)); element.setAttribute('contenteditable', 'false'); insert(element); } }; this.remove = function(tag) { var element = this.tags[tag]; if(element) this.element.removeChild(element); }; this.element = element;
};
var input = new TagsInput('.tags-input');
Tags Input - Script Codes
Tags Input - Script Codes
Home Page Home
Developer Julien Dargelos
Username juliendargelos
Uploaded November 29, 2022
Rating 4.5
Size 4,202 Kb
Views 18,216
Do you need developer help for Tags Input?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Julien Dargelos (juliendargelos) Script Codes
Name
Skateboard tricks
Grapher
Vusic
SmartPass
Watch
InfoGrid
Scroll snap points carousel
Pure CSS Torch Light
A Pen by Julien Dargelos
Psychedelic Animation
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!