Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Chức Năng Copy Text JavaScript

Cách Tạo Chức Năng Copy Text JavaScript


Ngày 30 Tháng 10 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 copy text javascript cho thiết kế và phát triển website. và phát triển website nha.

Copy To Clipboard JS

HTML

Ngày hôm nay chúng ta sẽ đi vào tạo cấu trúc HTML cho chức năng này thông qua đoạn code dưới đây nha:

<!DOCTYPE html>
<html lang="vi">
   <head>
      <meta charset="utf-8">
      <title>Copy to clipboard html</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="container">
         <textarea id="copyText" cols="60" rows="5"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum ligula nec purus ullamcorper facilisis. Nulla a pharetra ligula. </textarea>
         <br />
         <div class="btn">
            <button>Sao Chép Vào Clipboard</button><span class="tooltip">copied</span>
         </div>
         <textarea cols="60" id="pasteText" placeholder=" nội dung sao chép vào đây" rows="5"></textarea>
      </div>
   </body>
</html>

CSS

Tiếp theo chúng ta dùng các thuộc tính CSS cơ bản để giúp chức năng copy to clipboard được đẹp hơn bằng đoạn mã bên dưới :

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
}
::selection {
  color: #fff;
  background: #483D8B;
}
textarea{
  padding: 10px;
  font-size: 17px;
  resize: none;
  text-align: justify;
  color: #202020;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
textarea:focus{
  outline-color: #1E90FF;
  border-color: #1E90FF;
}
.btn{
  margin: 5px 0 40px 0;
}
.btn button{
  padding: 9px 15px;
  font-size: 17px;
  text-transform: uppercase;
  font-weight: 500;
  background: linear-gradient(to right, #b993d6, #8ca6db);
  border: none;
  color: #fff;
  cursor: pointer;
  letter-spacing: 1px;
  border-radius: 3px;
  outline: none;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.btn .tooltip{
  position: relative;
  margin-left: -10px;
  font-size: 17px;
  font-weight: 500;
  color: #f2f2f2;
  z-index: -1;
  background: #FF1493;
  padding: 5px 10px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s, margin-left 0.4s;
}
.btn .tooltip.show{
  margin-left: 10px;
  opacity: 1;
  pointer-events: auto;
}
.tooltip:before{
  content: '';
  position: absolute;
  height: 15px;
  width: 15px;
  background: #FF1493;
  top: 50%;
  left: -5px;
  z-index: -1;
  transform: translateY(-50%) rotate(45deg);
}

Và kết quả bạn xem hình ảnh bên dưới nha:

Copy text to clip board

Javascript

Trong phần này chúng ta sẽ viết mã để giúp chức năng copy text to clipboard bằng đoạn mã javascript ở bên dưới đây nha:

const copyText = document.querySelector("#copyText");
const pasteText = document.querySelector("#pasteText");
const button = document.querySelector("button");
const tooltip = document.querySelector(".tooltip");
button.addEventListener('click', function(){
  copyText.select();
  pasteText.value = "";
  tooltip.classList.add("show");
  setTimeout(function(){
    tooltip.classList.remove("show");
  },700);
  if(document.execCommand("copy")){
    pasteText.focus();
  }else{
    alert("Xảy ra lỗi");
  }
});

Và bạn xem video bên dưới để thấy chức năng này hoạt động nha.

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

See the Pen Untitled by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn tạo được chức năng copy to clipboard js 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.