Javascript로 Clipboard 복사 버튼 만들기

웹을 돌아다니다 보면 Embed Code같은 걸 버튼 하나로 복사하는 것을 많이 보았을 것이다. 그래서 이번에 Clipboard에 복사 버튼을 만들기 위한 간단한 소스코드를 공유한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>
cs

 

아주 간단하다. 혹 <p> 태그가 아닌 <textarea>나 <code> 태그 안의 내용을 복사하고 싶다면, 아래와 같이 바꾸기만 하면된다. 바뀐 것을 빨간색, 매치가 꼭 되어야하는 것을 초록색으로 표시해보았다. 매치만 된다면, 본인이 원하는데로 바꿔도 전혀 관계가 없다.

1
2
<textarea id=”p1“>복사하고 싶은 텍스트</textarea>
<button onclick=”copyToClipboard(‘#p1‘)”>텍스트 복사</button>
cs

 

이상.

 

참고

댓글 남기기