Обычно используемой функцией в веб-приложениях является кнопка «Копировать ссылку», позволяющая пользователям легко скопировать текущий URL-адрес в буфер обмена. В этой статье мы рассмотрим несколько методов реализации кнопки «Копировать ссылку» с использованием различных технологий, таких как JavaScript, HTML и CSS. Мы предоставим примеры кода для каждого метода, чтобы вы могли выбрать тот, который лучше всего соответствует требованиям вашего проекта.

Метод 1: использование API буфера обмена
API буфера обмена предоставляет простой способ копирования текста в буфер обмена. Вот пример реализации кнопки «Копировать ссылку» с помощью этого метода:

function copyLink() {
  navigator.clipboard.writeText(window.location.href)
    .then(() => {
      alert("Link copied to clipboard!");
    })
    .catch((error) => {
      console.error("Failed to copy link: ", error);
    });
}

HTML:

<button onclick="copyLink()">Copy Link</button>

Метод 2: выполнение команды копирования.
Другой подход заключается в использовании метода execCommandдокумента для выполнения команды копирования. Вот пример:

function copyLink() {
  const linkInput = document.createElement("input");
  linkInput.value = window.location.href;
  document.body.appendChild(linkInput);
  linkInput.select();
  document.execCommand("copy");
  document.body.removeChild(linkInput);
  alert("Link copied to clipboard!");
}

HTML:

<button onclick="copyLink()">Copy Link</button>

Метод 3: использование сторонней библиотеки (например, Clipboard.js)
Если вы предпочитаете использовать стороннюю библиотеку, Clipboard.js — отличный выбор. Он предоставляет простой и интуитивно понятный API для копирования текста. Вы можете подключить библиотеку через CDN или загрузив ее. Вот пример:

function copyLink() {
  const clipboard = new ClipboardJS('.copy-link-button', {
    text: function() {
      return window.location.href;
    }
  });

  clipboard.on('success', function(e) {
    alert("Link copied to clipboard!");
  });
  clipboard.on('error', function(e) {
    console.error("Failed to copy link: ", e.action);
  });
}

HTML:

<button class="copy-link-button" onclick="copyLink()">Copy Link</button>

В этой статье мы рассмотрели различные способы реализации кнопки «Копировать ссылку» в веб-приложении. Мы рассмотрели использование API буфера обмена, выполнение команды копирования и использование сторонней библиотеки, такой как Clipboard.js. Выберите метод, соответствующий требованиям вашего проекта, и интегрируйте его в свое приложение, чтобы предоставить пользователям удобный способ копирования ссылок. Приятного кодирования!