Sao chép văn bản vào Clipboard bằng Javascript và CSS

Chia sẻ bởi

TradeVN

28/07/2021 - Cập nhật: 11/08/2021

749

Đại lý vé máy bay giá rẻ nhất cả nước Nương Huỳnh

Sao chép nội dung đơn giản bằng Javascript

Mục mục bài viết

Làm thế nào chúng ta có thể tạo một chương trình để sao chép văn bản hoặc nội dung chỉ với một cú nhấp chuột? Giải pháp là sử dụng Javascript và CSS, trong bài viết này chúng tôi sẽ giới thiệu đến các bạn cách để hoàn thành nó.

Bây giờ bạn có thể nhìn thấy điều này một cách trực quan, bạn cũng có thể xem trực tiếp bằng cách nhấn vào nút XEM DEMO ở trên. Nếu bạn thích nó, hãy sử dụng mã nguồn bên dưới.

Xem Demo

JavaScript sao chép vào khay nhớ tạm

Trước khi chia sẻ mã nguồn , chúng ta hãy nói về nó. Đầu tiên, tôi đã tạo hai trường văn bản HTML. Một cho văn bản và một để trống để kiểm tra, dán văn bản đã sao chép. Giữa hai trường văn bản, tôi đã đặt một nút để chạy chương trình. Trong mỗi phần tử, tôi đã đặt một ID duy nhất để tạo kiểu và tìm nạp và sửa đổi bằng JS.

Bây giờ trong tệp CSS, tôi đã đặt tất cả các phần tử vào đúng vị trí. Tôi đã thực hiện một số thuộc tính của CSS như kiểu font, color, margin, padding… Trong chương trình này JavaScript xử lý tính năng chính, có một lệnh JS đơn giản cho bản sao. Để sao chép nội dung tài liệu JavaScript đã sử dụng lệnh document.execCommand("copy"). Xem thêm thông tin về lệnh này tại đây.

Chương trình này rất đơn giản, không có gì đặc biệt để giải thích, bạn sẽ hiểu dễ dàng sau khi xem mã. Để tạo chương trình, bạn phải tạo 3 tệp. Đầu tiên cho HTML , thứ 2 cho CSS và thứ 3 cho JavaScript . Làm theo các bước để tạo điều này mà không có bất kỳ lỗi nào.

Mã HTML

Tạo một tệp HTML định dạng index.html và đặt các mã được cung cấp bên dưới.

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Sao chép văn bản bằng Javascript và CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Sao chép văn bản bằng Javascript và CSS</h1>
<textarea id="copy-text" spellcheck="false">Đây là một số văn bản Demo để thử nghiệm chương trình sao chép vào khay nhớ tạm. Nhấp vào nút dưới đây để sao chép các văn bản này.</textarea>
<p style="text-align: center;"><button id="copy" type="button">Sao chép<span class="done" aria-hidden="true">Đã sao chép</span></button></p>
<textarea id="empty-field" placeholder="Dán văn bản bạn đã sao chép vào đây để kiểm tra...."></textarea>
<script  src="function.js"></script>
</body>
</html>

Mã CSS

Tạo một tệp CSS có định dạngstyle.css và đặt các mã được cung cấp bên dưới.

body {
  text-align: center;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  color: #212121;
  line-height: 1.6;
}
.done {
  position: absolute;
  left: 0; top: 0; right: 0;
  text-align: center;
  opacity: 0;
  transform: translateY(-1.5em);
  color: #12ce47;
  transition: all .700s;
}
.copied .done {
  opacity: 1;
  transform: translateY(-2em);
}
h1 {
  margin: 1.75em auto 1.25em;
}
textarea,
button {
  font-size: 1em;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  margin-top: 3em;
}
textarea {
  display: block;
  width: 700px;
  max-width: 100%;
  height: 75px;
  margin: 2em auto 1.5em;
  background: #F2F2F6;
  border: 1px solid #ddd;
  padding: 10px 15px;
  resize: vertical;
}
[id="empty-field"] {
  margin-top: 4em;
}
textarea:focus {
  border-color: #8f25cc;
}
button {
  position: relative;
  padding: 8px 20px;
  border: 0;
  font-size: 0.835em;
  text-transform: uppercase;
  letter-spacing: 0.125em;
  font-weight: bold;
  color: #FFF;
  background: #b451ed;
  transition: background .275s;
  cursor: pointer;
}
button:hover,
button:focus {
  background: #6b209a;
}

Mã Javascript

Tạo một tệp Javascript có định dạngfunction.js và đặt các mã được cung cấp bên dưới.

var toCopy  = document.getElementById( 'copy-text' ),
    btnCopy = document.getElementById( 'copy' ),
    paste   = document.getElementById( 'empty-field' );
 
btnCopy.addEventListener( 'click', function(){
  toCopy.select();
  paste.value = '';
  
  if ( document.execCommand( 'copy' ) ) {
      btnCopy.classList.add( 'copied' );
    paste.focus();
    
      var temp = setInterval( function(){
        btnCopy.classList.remove( 'copied' );
        clearInterval(temp);
      }, 600 );
    
  } else {
    console.info( 'document.execCommand went wrong…' )
  }
  
  return false;
} );

Tất cả đã xong. Bây giờ bạn đã tạo thành công chức năng Sao chép văn bản bằng Javascript và CSS. Nếu bạn có bất kỳ thắc mắc hoặc câu hỏi thì bình luận ở phần bên dưới nhé!

Hãy cho chúng tôi một lượt hoặc chia sẻ bài viết với bạn bè của bạn. Cảm ơn vì đã ghé thăm, hãy tiếp tục ghé thăm Tradevn.tech. Xin cám ơn!