Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Tag Input Javascript

Cách Tạo Tag Input Javascript


Ngày 4 Tháng 11 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo chức năng tag input bằng javascript cho thiết kế và phát triển website nha.

Tag Input JavaScript

HTML

Đầu tiên chúng ta sẽ đi vào tạo cấu trúc cho chức năng này thông qua các thẻ HTML cũng như thêm các thư viện cần thiết cho chức năng này như unicons CDN. Để hiểu rõ hơn bạn xem ở đoạn code dưới đây nha:

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="utf-8">
    <title>Tạo Tags Input - Niemvuilaptrinh</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/thinline.css">
  </head>
  <body>
    <div class="container">
      <div class="title">
        <img src="https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/Tags-Input/tag-icon.svg" alt="icon">
        <h2>Tags</h2>
      </div>
      <div class="content">
        <p>Bạn hãy nhập từ khoá và nhập enter để lưu từ khoá.</p>
        <ul><input type="text" spellcheck="false"></ul>
      </div>
      <div class="details">
        <p><span>10</span> tags tối đa</p>
        <button>Xoá tất cả tag</button>
      </div>
    </div>
  </body>
</html>

CSS

Tiếp theo chúng ta sẽ dùng các thuộc tính CSS cơ bản để giúp input field tag js trông đẹp hơn thông qua đoạn code sau đây nha:

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #5372F0;
}
::selection{
  color: #fff;
  background: #5372F0;
}
.container{
  width: 496px;
  background: #fff;
  border-radius: 10px;
  padding: 18px 25px 20px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.container :where(.title, li, li i, .details){
  display: flex;
  align-items: center;
}
.title img{
  max-width: 21px;
}
.title h2{
  font-size: 21px;
  font-weight: 600;
  margin-left: 8px;
}
.wrapper .content{
  margin: 10px 0;
}
.content p{
  font-size: 15px;
}
.content ul{
  display: flex;
  flex-wrap: wrap;
  padding: 7px;
  margin: 12px 0;
  border-radius: 5px;
  border: 1px solid #a6a6a6;
}
.content ul  li{
  color: #333;
  margin: 4px 3px;
  list-style: none;
  border-radius: 5px;
  background: #F2F2F2;
  padding: 5px 8px 5px 10px;
  border: 1px solid #e3e1e1;
}
.content ul li i{
  height: 20px;
  width: 20px;
  color: #808080;
  margin-left: 8px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 50%;
  background: #dfdfdf;
  justify-content: center;
}
.content ul input{
  flex: 1;
  padding: 5px;
  border: none;
  outline: none;
  font-size: 16px;
}
.container .details{
  justify-content: space-between;
}
.details button{
  border: none;
  outline: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  padding: 9px 15px;v   border-radius: 5px;
  background: #5372F0;
  transition: background 0.3s ease;
}
.details button:hover{
  background: #2c52ed;
}

Kết quả bạn xem hình ảnh dưới đây nha:

tags input javascript

Javascript

Phần cuối cùng mình sẽ sử dụng javascript để thực hiện các hành động như thêm, xoá và đếm tag trong ô input thông qua đoạn code sau đây nha:

const ul = document.querySelector("ul"),
input = document.querySelector("input"),
tagNumb = document.querySelector(".details span");
/*Số lượng tối đa tag*/
let maxTags = 10,
/*Thiết lập tag mặc định*/
tags = ["niemvui", "laptrinh"];
countTags();
createTag();
/*Đếm số lượng tag*/
function countTags(){
    input.focus();
    tagNumb.innerText = maxTags - tags.length;
}
/*Tạo tag*/
function createTag(){
    ul.querySelectorAll("li").forEach(li => li.remove());
    tags.slice().reverse().forEach(tag =>{
        let liTag = `<li>${tag} <i class="uit uit-multiply" onclick="remove(this, 
'${tag}')"></i></li>`;
        ul.insertAdjacentHTML("afterbegin", liTag);
    });
    countTags();
}
/*Xoá tag*/
function remove(element, tag){
    let index  = tags.indexOf(tag);
    tags = [...tags.slice(0, index), ...tags.slice(index + 1)];
    element.parentElement.remove();
    countTags();
}
/*Thêm tag bằng dấu enter*/
function addTag(e){
    if(e.key == "Enter"){
        let tag = e.target.value.replace(/\s+/g, ' ');
        if(tag.length > 1 && !tags.includes(tag)){
            if(tags.length  <  10){
                tag.split(',').forEach(tag => {
                    tags.push(tag);
                    createTag();
                });
            }
        }
        e.target.value = "";
    }
}
input.addEventListener("keyup", addTag);
const removeBtn = document.querySelector(".details button");
removeBtn.addEventListener("click", () =>{
    tags.length = 0;
    ul.querySelectorAll("li").forEach(li => li.remove());
    countTags();
});

Và kết quả bạn xem video bên dưới đây nha.

Còn dưới đây là dự án trên Codepen nha.

See the Pen tao the tag input by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp cho bạn cách tạo chức năng input tag javascript cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Tìm Kiếm Bài Viết

Ads Digital Ocean

Nhận Ngay $100 sử dụng dịch vụ khi đăng ký tài khoản trên DigitalOcean.

Ads azdigi

Sử dụng dịch vụ hosting của Azdigi chỉ với 50.000 đồng.

Ads HostGator

Nhận Ngay Tên Miền Và Chứng Chỉ SSL Miễn Phí Khi Sử Dụng Hosting Của HostGator.

Ads Name Cheap

Đăng Ký Tên Miền Chỉ Với $0.99/năm cùng với Name Cheap.