Javascript로 Clipboard 복사 버튼 만들기

개인적으로 노트할 목적으로 만든 글이라 내용만 추려 기록해두었습니다. 필요하신 분들은 참고해보시기 바랍니다.

웹페이지를 돌아다니다 보면, ‘Embed Code’ 같은 걸 버튼 하나로 클립보드에 복사하는 기능이 많이 있습니다. 클립보드 복사 버튼을 개인적으로 작업 중인 페이지에 만드는 김에 해당 과정을 아래와 같이 기록하여 공유합니다.

<p id="p1">복사하고 싶은 텍스트</p>
<button onclick="copyToClipboard('#p1')">텍스트 복사</button>

<script>
function copyToClipboard(element) {
var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
document.execCommand("copy");
  $temp.remove();
alert("copy complete"); //Optional Alert, 삭제해도 됨
}
</script>

혹, <p> 태그가 아닌 <textarea>나 <code> 태그 안의 내용을 복사하고 싶다면, 아래와 같이 <p> 태그를 대체해주기만 하면 됩니다. 바뀐 내용을 빨간색으로 표기해두었으니 참고 바랍니다.

<textarea id="p1">복사하고 싶은 텍스트</textarea>
<button onclick="copyToClipboard('#p1')">텍스트 복사</button>