안녕하세요.
웹페이지를 통해서 태그를 추가 삭제하는 기능을 빠르게 구현하는 방법을 공유하겠습니다.
태그를 추가하는 기능은 게시물 작성, 콘텐츠 등록 등 다양한 상황에서 사용되는 기능입니다.
스틱 코드에 등록해놓고 필요할 때마다 불러와 사용하면 빠르게 기능 구현이 가능합니다.
stickode.com/detail.html?no=2133
스틱코드
stickode.com
1. 태그 추가
추가할 태그를 입력하고 엔터(Enter)를 누르면 태그가 추가됩니다.
2. 태그 중복 체크
이미 추가된 태그는 중복 체크하여 추가하지 못하도록 처리했습니다.
3. 태그 여러 개 추가
여러 태그를 추가할 수 있습니다.
4. 태그 삭제
삭제할 태그에 마우스를 옮기면 해당 태그만 색상이 변경됩니다.
x 버튼을 누르면 태그가 삭제됩니다.
5. 전체 코드
HTML 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>태그 추가삭제하기</title>
<link rel="stylesheet" type="text/css" href="/tag_create.css">
<script type="module" src="/tag_create.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div style="margin-top:40px; margin-left:40px;" class="content">
<div style="display: flex;">
<h1 style="width: 150px; margin-right:30px;">태그 입력<h1 />
<input type="text" id="tag" size="20" placeholder="태그입력" />
</div>
<ul id="tag-list">
</ul>
</div>
</body>
</html>
CSS 코드
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
padding: 16px 0;
}
ul li {
display: inline-block;
margin: 0 5px;
font-size: 14px;
letter-spacing: -.5px;
}
form {
padding-top: 16px;
}
ul li.tag-item {
padding: 4px 8px;
background-color: #777;
color: #000;
}
.tag-item:hover {
background-color: #262626;
color: #fff;
}
.del-btn {
font-size: 12px;
font-weight: bold;
cursor: pointer;
margin-left: 8px;
}
JS 코드
$(document)
.ready(function () {
var tag = {};
var counter = 0;
// 태그를 추가한다.
function addTag(value) {
tag[counter] = value; // 태그를 Object 안에 추가
counter++; // counter 증가 삭제를 위한 del-btn 의 고유 id 가 된다.
}
// 최종적으로 서버에 넘길때 tag 안에 있는 값을 array type 으로 만들어서 넘긴다.
function marginTag() {
return Object.values(tag)
.filter(function (word) {
return word !== "";
});
}
$("#tag")
.on("keyup", function (e) {
var self = $(this);
console.log("keypress");
// input 에 focus 되있을 때 엔터 및 스페이스바 입력시 구동
if (e.key === "Enter" || e.keyCode == 32) {
var tagValue = self.val(); // 값 가져오기
// 값이 없으면 동작 안합니다.
if (tagValue !== "") {
// 같은 태그가 있는지 검사한다. 있다면 해당값이 array 로 return 된다.
var result = Object.values(tag)
.filter(function (word) {
return word === tagValue;
})
// 태그 중복 검사
if (result.length == 0) {
$("#tag-list")
.append("<li class='tag-item'>" + tagValue + "<span class='del-btn' idx='" + counter + "'>x</span></li>");
addTag(tagValue);
self.val("");
} else {
alert("태그값이 중복됩니다.");
}
}
e.preventDefault(); // SpaceBar 시 빈공간이 생기지 않도록 방지
}
});
// 삭제 버튼
// 삭제 버튼은 비동기적 생성이므로 document 최초 생성시가 아닌 검색을 통해 이벤트를 구현시킨다.
$(document)
.on("click", ".del-btn", function (e) {
var index = $(this)
.attr("idx");
tag[index] = "";
$(this)
.parent()
.remove();
});
})
'JavaScript' 카테고리의 다른 글
| [JavaScript] 디지털 시계 만들기 (4) | 2021.06.02 |
|---|---|
| [JavaScript] JSON 데이터 사용해보기 (0) | 2021.06.01 |
| [JavaScript] 배경 색상 변경시키기 (0) | 2021.05.20 |
| [JavaScript] 애니메이션 구현하기 (anime.js 사용) (0) | 2021.05.19 |
| [JavaScript] 자바스크립트로 이미지 슬라이더 구현하기 (0) | 2021.05.06 |
