Skip to content

Commit 1acb70e

Browse files
hicodersofficialhicodersofficial
committed
tag input added
1 parent 292c468 commit 1acb70e

File tree

3 files changed

+232
-0
lines changed

3 files changed

+232
-0
lines changed

‎tag-input-field/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Tag Input Field</title>
9+
</head>
10+
<body>
11+
<h1>Tags Input</h1>
12+
<div class="tag-area">
13+
<label for="tag-input" class="label">Add Languages</label>
14+
<ul>
15+
<input type="text" class="tag-input" id="tag-input" />
16+
</ul>
17+
</div>
18+
<script src="./main.js"></script>
19+
</body>
20+
</html>

‎tag-input-field/main.js

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/**
2+
* @link
3+
* INSTAGRAM: @hi.coders
4+
*/
5+
6+
const tagInput = document.querySelector(".tag-input");
7+
const tagArea = document.querySelector(".tag-area");
8+
const ul = document.querySelector(".tag-area ul");
9+
const label = document.querySelector(".label");
10+
11+
let tags = [];
12+
13+
function addEvent(element) {
14+
tagArea.addEventListener("click", () => {
15+
element.focus();
16+
});
17+
18+
element.addEventListener("focus", () => {
19+
tagArea.classList.add("active");
20+
label.classList.add("label-active");
21+
});
22+
23+
element.addEventListener("blur", (e) => {
24+
tagArea.classList.remove("active");
25+
if (element.value === "" && tags.length === 0) {
26+
label.classList.remove("label-active");
27+
}
28+
if (!element.value.match(/^\s+$/gi) && element.value !== "") {
29+
tags.push(e.target.value.trim());
30+
element.value = "";
31+
renderTags();
32+
}
33+
});
34+
/**
35+
* NOTE: Keyboard events works unexpected on mobile devices.
36+
* For mobile devices you need to add this code
37+
* to get the last character user entered.
38+
* value[value.length - 1] === " "
39+
*
40+
* keycode 32 is for SpaceBar
41+
* keycode 13 is for EnterKey
42+
*/
43+
44+
element.addEventListener("keydown", (e) => {
45+
console.log(e);
46+
const value = e.target.value;
47+
if (
48+
(e.keyCode === 32 ||
49+
e.keyCode === 13 ||
50+
value[value.length - 1] === " ") &&
51+
!value.match(/^\s+$/gi) &&
52+
value !== ""
53+
) {
54+
tags.push(e.target.value.trim());
55+
element.value = "";
56+
renderTags();
57+
}
58+
if (e.keyCode === 8 && value === "") {
59+
tags.pop();
60+
renderTags();
61+
}
62+
});
63+
}
64+
addEvent(tagInput);
65+
66+
function renderTags() {
67+
ul.innerHTML = "";
68+
tags.forEach((tag, index) => {
69+
createTag(tag, index);
70+
});
71+
const input = document.createElement("input");
72+
input.type = "text";
73+
input.className = "tag-input";
74+
addEvent(input);
75+
ul.appendChild(input);
76+
input.focus();
77+
setTimeout(() => (input.value = ""), 0);
78+
}
79+
80+
function createTag(tag, index) {
81+
const li = document.createElement("li");
82+
li.className = "tag";
83+
const text = document.createTextNode(tag);
84+
const span = document.createElement("span");
85+
span.className = "cross";
86+
span.dataset.index = index;
87+
span.addEventListener("click", (e) => {
88+
tags = tags.filter((_, index) => index != e.target.dataset.index);
89+
renderTags();
90+
});
91+
li.appendChild(text);
92+
li.appendChild(span);
93+
ul.appendChild(li);
94+
}

‎tag-input-field/style.css

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
body {
2+
margin: 0;
3+
font-family: "Poppins", Arial, Helvetica, sans-serif;
4+
background: #1f2023;
5+
display: flex;
6+
flex-direction: column;
7+
justify-content: center;
8+
align-items: center;
9+
color: #fff;
10+
height: 100vh;
11+
}
12+
13+
ul {
14+
margin-block-start: 0;
15+
margin-block-end: 0;
16+
padding-inline-start: 0px;
17+
}
18+
19+
li {
20+
list-style: none;
21+
}
22+
23+
.tag-area {
24+
padding: 1rem;
25+
outline: none;
26+
width: 600px;
27+
border: 2px solid #605f6f;
28+
border-radius: 5px;
29+
transition: all 0.2s;
30+
cursor: text;
31+
display: flex;
32+
align-items: center;
33+
position: relative;
34+
}
35+
36+
.label {
37+
position: absolute;
38+
background: #1f2023;
39+
padding: 0 0.3rem;
40+
color: #adadad;
41+
top: 22px;
42+
transition: all 0.1s;
43+
}
44+
45+
.label-active {
46+
top: -11px;
47+
color: #8d29ff;
48+
font-size: 13px;
49+
}
50+
51+
.tag-area ul {
52+
display: flex;
53+
flex-wrap: wrap;
54+
align-items: center;
55+
}
56+
57+
.active {
58+
border: 2px solid #8d29ff !important;
59+
}
60+
61+
.tag {
62+
padding-left: 0.8rem;
63+
background: #353535;
64+
border-radius: 100px;
65+
display: flex;
66+
align-items: center;
67+
justify-content: space-between;
68+
margin: 0.5rem;
69+
}
70+
71+
.tag-input {
72+
padding: 0.5rem;
73+
outline: none;
74+
border: none;
75+
width: 150px;
76+
margin-left: 0.5rem;
77+
background: transparent;
78+
font-size: 20px;
79+
color: #fff;
80+
}
81+
82+
.cross {
83+
cursor: pointer;
84+
display: flex;
85+
margin-left: 0.5rem;
86+
justify-content: center;
87+
align-items: center;
88+
padding: 1.3rem;
89+
transform: rotate(45deg);
90+
border-radius: 50%;
91+
background: #414141;
92+
}
93+
94+
.cross:hover {
95+
background: #818181b1;
96+
}
97+
98+
.cross::before {
99+
content: "";
100+
width: 2px;
101+
height: 16px;
102+
position: absolute;
103+
background: rgb(255, 255, 255);
104+
}
105+
106+
.cross::after {
107+
content: "";
108+
height: 2px;
109+
width: 16px;
110+
position: absolute;
111+
background: rgb(255, 255, 255);
112+
}
113+
114+
@media (max-width: 650px) {
115+
.tag-area {
116+
width: 300px;
117+
}
118+
}

0 commit comments

Comments
 (0)