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

Желание создать кнопку для копирования определенного контента, вместо его традиционного выделения и копирования с помощью контекстного меню или сочетания горячих клавиш, может быть обусловлено совершенно различными причинами, и, несомненно, отличной новостью является то, что реализация подобного функционала не вызывает никаких затруднений.

Итак, логика данного решения достаточно проста: создаем невидимый элемент textarea, в который копируем необходимый текст, с помощью кнопки Copy переносим его в буфер обмена и удаляем созданный элемент textarea из DOM.

Для начала создадим элементарный контент:

    
Это какой-то текст
    Copy

Он не содержит никаких сюрпризов - это простой текст заключенный в абзац p и кнопка, выполняющая определенную функцию при нажатии. Для тега p, создан id, который используется в теле функции.
Теперь напишем JavaScript-код и разберем его детально:
function copyToClipboard() {
    const str = document.getElementById('item-to-copy').innerText;
    const el = document.createElement('textarea');
    el.value = str;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
}


Итак при нажатии на кнопку Copy:

мы получаем содержимое целевого элемента p,
создаем элемент textarea,
устанавливаем для textarea определенные параметры: делаем его значение равным содержимому целевого элемента p и определяем для него атрибут readonly,
создаем для textarea некоторые CSS-свойства: position: absolute и left: -9999px (для того чтобы скрыть элемент от пользователя),
затем мы добавляем textarea в DOM,
применяем для данного элемента метод select() (следует заметить, что select() можно применить только к textarea, с p этот метод работать не будет),
копируем необходимый контент с помощью document.execCommand('copy'),
наконец, мы удаляем созданный элемент textarea из DOM.

На данном этапе, попытавшись вставить текст с помощью сочетания кнопок Ctrl + V или с помощью пункта “Вставить” (“Paste”) контекстного меню, мы увидим что целевой контент элемента p находится в буфере обмена.
Для улучшения визуального эффекта можн добавить еще одну строку кода после removeChild():
alert(`Copied: ${str}`);


Теперь после копирования текста в буфер обмена мы видим соответствующее сообщение.

Всего 10 строк кода понадобилось, чтобы создать простой, но очень полезный функционал.

Спасибо за внимание.

Написано по материалам статьи AlbertoM “Copy text to the clipboard with JavaScript in 10 lines of code”.
  
  

    



    




      
      

  

  
  

    

      
Новые публикации
    
    

      

  
    
  
      
      

        

JavaScript: сохраняем страницу в pdf

        2024-07-12
      
    
    

      

  
    
  
      
      

        

HTML: Полезные примеры

        2024-07-11
      
    
    

      

  
    
  
      
      

        

CSS: Ускоряем загрузку страницы

        2024-07-10
      
    
    

      

  
    
  
      
      

        

JavaScript: 5 странностей

        2024-07-10
      
    
    

      

  
    
  
      
      

        

JavaScript: конструктор сортировщиков

        2024-06-27
      
    
    Далее
  
  

    

      

Категории

    
    

      

        frontend238

      

        bash39

      

        dev39

      

        backend29

      

        hugo5

      

        laravel3

      

        bootstrap2

      

        дизайн2
      

        go1

      
    
  
  

  
  

    

      
О нас
    
    
Frontend & Backend. Статьи, обзоры, заметки, код, уроки.