Не работает: Скопируйте HTML-подпись в буфер обмена с Javascript

Question

Как заставить кнопку «копировать в буфер обмена» работать для моего HTML + Javascript? Я читал разные посты и попытался это, но он не работает для меня:

<button type="button" id="copy-button" data-clipboard-target="#copy">Copy</button> 
<script> 
(function(){ 
    new Clipboard('#copy-button'); 
})(); 
</script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.4.0/clipboard.min.js"></script> 

Цель состоит в том, чтобы создать инструмент электронной подписи - заполните поля, нажмите кнопку копирования и вставьте его в свой адрес электронной почты создатель подписи клиента.

Вот полный код: https://jsfiddle.net/t7y5uq89/

(Извиняюсь заранее за сочетание HTML + JavaScript в одном файле - Я самостоятельно образованный кодировщик)

Answer 1

Вы вызываете new Clipboard внутри само- вызывающая функция, которая не будет работать, потому что она выполняется до загрузки DOM. Вместо этого вы должны обернуть его в «документ готов» события:

$(function() { 
 
    new Clipboard('#copy-button'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script> 
 

 
<button type="button" id="copy-button" data-clipboard-target="#copy">Copy</button> 
 

 
<div id="copy"> 
 
    <h1>John Foo</h1> 
 
</div>

Я также хотел бы критиковать вашу HTML-разметку:

• Там в основном не семантика в коде , Например, вы должны использовать теги <label> для указания меток ввода, а не теги <b> (которые устарели более десяти лет).

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

  body { 
      font: 12px 'Trebuchet MS', Arial, Helvetica, sans-serif; 
  } 
  

  Также обратите внимание, что имена шрифтов с пробелами требуют кавычек вокруг них.

• Не используйте встроенные стили.
• Не смешивайте HTML с Javascript. Зачем? Для удобства использования кода и упрощения его чтения. Скорее всего, это причина, по которой никто не нашел времени, чтобы ответить на ваш вопрос.
• Правильно закройте свои HTML-теги.