JavaScript/jQuery 클립보드 복사 : (공유)버튼눌렀을 때 주소 클립보드에 복사
웹 프로젝트를 진행하다가 공유하기 버튼을 눌렀을 때,
해당 페이지의 주소를 클립보드에 복사시키는 작업을 해야할 때가 있었다.
(물론, 카카오/페이스북 등 다양한 방법으로 공유할 수 있지만
나는 클립보드에 해당 페이지의 주소 링크를 복사하는 방식으로 구현했다.)
처음에 이 부분 구현할 때 구글링 하느라 헤맸던 것 같은데,
알고보니 그렇게 복잡한 건 아니었다.
1. 버튼 태그에 class 이름 주기 / data-clipboard-text / onclick 이벤트 걸기
(공유)버튼 태그에 임의로 class 이름과 data-clipboard-text, onclick 이벤트를 걸어주어야 한다.
|
1
2
3
4
|
<div class="share_button_test">
<button type="button" class="goods_share" data-clipboard-text="1" onclick="urlClipCopy()">
</button>
</div>
|
cs |
1. class 이름주기 : 나는 class 이름을 goods_share로 했다.
2. data-clipboard-text = "복사할 내용"
data-clipboard-text="복사할 내용" 이 와야 하는데,
나는 우선 data-clipboard-text에 1을 넣어주고
나중에 클릭했을 때 1을 현재 주소로 바꾸는 방식으로 구현했다.
3. 공유하는 코드를 적을 이벤트를 onclick으로 걸어준다.
나는 함수 이름을 urlClipCopy() 로 했다.
2. cdn js 파일 연결
주소링크 클립보드에 복사하는 코드를 쓰려면 먼저 cdn js를 연결해줘야 한다.
구글링으로 여러 방법을 찾아보다가, 나는 아래 코드로 연결해주었다.
(cdn이기 때문에 js파일을 따로 넣어주거나 할 필요 없이, 아래 코드만 복사해서 사용하면 된다)
|
1
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
|
cs |
3. 해당 페이지의 주소링크 클립보드에 복사하는 jQuery 코드 구현
위에서 data-clipboard-text의 내용을 '1'로 했기 때문에,
'1'을 현재 페이지의 주소로 바꿔주는 작업이 필요하다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script>
function urlClipCopy() {
$('.goods_share').attr('data-clipboard-text', document.location.href);
var clipboard = new Clipboard('.goods_share');
clipboard.on('success', function(e) {
alert('주소가 복사되었습니다');
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
}
</script>
|
cs |
위에서 지정해준 class 이름을 이용해 버튼 태그의 data-clipboard-text의 내용을
'document.location.href'로 현재 페이지의 주소로 바꿨다.
그 다음 new Clipboard('.goods_share')로 새로운 클립보드를 만든다.
복사에 성공하면 alert로 '주소가 복사되었습니다' 메시지가 뜨도록,
복사에 실패할 경우 에러 메시지가 뜨도록 한다.
결과 ▼
주소가 복사되었다는 메시지가 뜨고,
다른 곳에 ctrl + v 하고 엔터쳤을 때
해당 페이지로 잘 이동하는것을 볼 수 있었다.