Как создать блок с кнопкой для копирования текста в буфер обмена используя HTML CSS и JavaScript | Copy Text to Clipboard using HTML CSS and JavaScript

Всем Привет! Сегодня Вы узнаете, как создать блок с кнопкой для копирования текста в буфер обмена используя HTML CSS и JavaScript. Вы сможете посмотреть видео демонстрацию копирования текста в буфер обмена, скопировать код или скачать архив с готовым кодом.

СКАЧАТЬ

ДЕМО

Также если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент. 

HTML КОД:

<!--font awesome(for icons)-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />

    <div class="wrapper">
      <div class="header">
        <h2>Скопировать текст в буфер обмена</h2>
        <div class="copy-btn">
          <i class="fas fa-copy"></i>
        </div>
      </div>

      <textarea spellcheck="false">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem nisi deleniti rerum. Deserunt, mollitia expedita delectus aliquam voluptatum adipisci sequi ipsa accusantium doloremque aspernatur facere quia minima necessitatibus earum provident autem similique, labore laborum cumque quae quidem maiores voluptas repellendus eius. Temporibus voluptas quia consectetur soluta voluptatibus ex fugit saepe.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga exercitationem sequi totam tempora et tenetur quod, corrupti laudantium quis cupiditate natus vitae iure molestiae illum animi error aliquam dolorem odio, iste alias officiis. Aliquam veritatis labore quod nihil earum, voluptas facere ab ipsam quas distinctio? Nesciunt iusto doloremque vel rem!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci accusamus blanditiis amet omnis eos cum nihil deserunt nisi et, in fuga voluptas aspernatur assumenda beatae culpa tenetur dolore iusto laboriosam. Fugiat maxime facilis odit qui esse quo ipsa pariatur cumque earum nemo molestiae, a molestias at minus laudantium sint ea!
      </textarea>
    </div>

CSS КОД:

.wrapper {
  position: relative;
  background: #fff;
  width: 600px;
  margin: 10px;
  padding: 0 20px 20px 20px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.wrapper .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
}

.wrapper .header h2 {
  font-size: 1.5em;
  font-weight: 700;
}

.wrapper .header .copy-btn {
  background: #eee;
  color: #999;
  font-size: 1.5em;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}

.wrapper .header .copy-btn:hover {
  color: #222;
}

.wrapper textarea {
  width: 100%;
  min-height: 400px;
  font-size: 1em;
  padding: 10px;
  outline: none;
  border: 1px solid #4070f4;
  border-radius: 5px;
  resize: none;
}

.wrapper textarea::-webkit-scrollbar {
  width: 5px;
}

.wrapper textarea::-webkit-scrollbar-track {
  background: #f2f2f2;
  border-radius: 10px;
}

.wrapper textarea::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 10px;
}

JAVASCRIPT КОД:

let copyBtn = document.querySelector(".copy-btn");
let textArea = document.querySelector("textarea");
let title = document.querySelector(".header h2");

copyBtn.addEventListener("click", () => {
  textArea.select();
  navigator.clipboard.writeText(textArea.value);
  copyBtn.innerHTML = ``;
  copyBtn.style.background = "lightgreen";
  copyBtn.style.color = "#fff";
  title.textContent = "Text copied to clipboard!";

  setTimeout(() => {
    document.getSelection().removeAllRanges();

    copyBtn.innerHTML = ``;
    copyBtn.style.background = "#eee";
    copyBtn.style.color = "#999";
    title.textContent = "Copy Text to Clipboard";
  }, 2000);
});