개인적으로 노트할 목적으로 만든 글이라 내용만 추려 기록해두었습니다. 필요하신 분들은 참고해보시기 바랍니다.
웹페이지를 돌아다니다 보면, ‘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>
- alert(“copy complete”); ▼
이상입니다.
참고
저는 이게 왜 안될까요?