Как сделать копирование куска кода в буфер обмена на js?

107

31 декабря 2020, 14:50

Для сотрудников был сделан скрипт, для формирования email письма. Заполняем поля, а ниже формируется письмо в формате html (подставляются данные из полей).

Вопрос, как сделать кнопку копировать в буфер обмена, все что ниже полей ввода? Это нужно чтобы после заполнения копировать полученный результат (шаблон) и вставлять в рассылку клиентам.

Answer 1

Фишка в том, что авто-копирование работает только для элементов input или textarea, которые выделены мышкой. Поэтому при клике на кнопку, надо "за кулисами" сперва создать такой элемент, вставить туда нужный текст, выделить его, скопировать, потом удалить:

(function(){ 
 
document.getElementById('copy').addEventListener('click', function(){ 
  let area = document.createElement('textarea'); /* Создали */ 
  area.value = document.getElementById('mama').innerHTML; /* Вставили текст */ 
  document.body.appendChild(area).select(); /* Добавили на страницу и выделили */ 
  document.execCommand('copy'); /* Скопировали */ 
  area.remove(); /* Удалили */ 
   
  /* Какая-то декорация, чтобы дать понять, что копирование сработало */ 
  this.innerHTML = 'Скопирова<span style="color: red">но</span>'; 
  setTimeout(function(){     
    document.getElementById('copy').innerHTML = 'Скопировать'; 
  },2000); 
}); 
 
})();

<div id="mama"> 
 
  Общий блок, куда записан 
   
  <p> какой-то HTML </p> 
  и нужно его копировать 
  <span> mooo </span> 
</div> 
 
<button id="copy">Скопировать</button>