JavaScript - 클립보드 기능 구현 (PC, MOBILE)

자바스크립트 중에 clipboard.js 라는 라이브러리가 있는데,

이걸로 우리는 아주 쉽게 클립보드 기능을 구현할 수 있어요.

 

아래의 링크로 접속하여 파일을 다운로드 하거나,

https://clipboardjs.com/

clipboard.js

아래에 올려놓은 CDN 스크립트를 HTML에 삽입해주세요.

<script src="https://cdn.jsdelivr.net/npm/clipboard-js@0.3.6/clipboard.min.js"></script>

 

1. JavaScript 

	let clipboard = new Clipboard('a');

	clipboard.on('success', function(e) {
		console.log(e);
	});
	clipboard.on('error', function(e) {
		console.log(e);
	});

 

2. HTML

└ 보통 버튼을 클릭했을 때 복사붙여넣기가 이루어지기 때문에 버튼으로 사용할 태그에 입력하면 됩니다.

<a data-clipboard-text="복사할내용">복사하기</a>

 

따로 클릭이벤트를 작성하지 않아도 Clipboard('a') 태그를클릭하면 복사가 되며,

제대로 기능이 되었는지 확인하기 위해 alert 기능을 넣어 시각적 효과를 줄수도 있습니다.