웹을 돌아다니다 보면 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 |
이상.
참고