클립보드 복사기능 [clipboard.js] 사용방법

 

 

 

모든 브라우저에 버튼이나 요소 클릭시 복사하는 기능을 구현하려면 플래시를 사용하는 방법이 일반적입니다.
하지만 최근에는 플래시 사용을 최소한으로 하는 경우가 많이 있습니다.

이렇게 플래시가 아닌 스크립트를 사용한 클립보드 복사기능을 구현한 오픈소스 기능이 있습니다.
바로 [clipboard.js] 입니다. 이 기능이 궁금해서 알아보고 나중에 사용하기 위해 블로그에 정리해 놓으려고 합니다.
필요한 분들은 아래 내용과 공식 홈페이지 [clipboard.js] 를 참고하세요.

[clipboard.js]

 

기능구현 + 해당 기능의 소스로 정리했습니다. 페이지 하단에는 해당 페이지의 전체 스크립트가 있습니다.

해당 기능의 전체 소스는 아래 압축파일에 있습니다.

clipboard-js-example.zip

다운로드

 

그럼 정리 시작하겠습니다.

 

Copy to clipboard

<h3>Copy to clipboard</h3>
<!-- Target -->
<input id="foo" value="복사 기능입니다." size="50">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
	Copy to clipboard
</button>

 

Cut to clipboard

<h3>Cut to clipboard</h3>
<!-- Target -->
<input id="bar" data-clipboard-action="cut" value="자르기 + 복사 기능입니다.(잘라내기)" size="50" />

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
	Cut to clipboard
</button>
		

 

Copy to clipboard(Button [data-clipboard-text] Attr Copy)

<h3>Copy to clipboard(Button [data-clipboard-text] Attr Copy)</h3>
<!-- Trigger -->
<button class="btn" data-clipboard-text="버튼 클릭시 data-clipboard-text 속성의 텍스트 값을 복사합니다.">
	Copy to clipboard
</button>
		

 

Advanced Usage

[nextElement] 버튼 클릭시 다음 엘리먼트 [nextElementSibling Content] 복사

<h5>다음 엘리먼트 선택</h5>
<button class="nextSiblingBtn">
	nextElement
</button>
<input id="nb" value="nextElementSibling Content" size="50">
			

/* nextElementSibling */
new Clipboard('.nextSiblingBtn', {
	target: function(trigger) {
		alert(trigger.getAttribute("class") + "Clicked!!\n\'" + document.querySelectorAll("#nb")[0].value + "\' 복사됨!!");
		return trigger.nextElementSibling;
	}
});
			

[ariaLabelBtn] 버튼 클릭시 [aria-label] 속성 값 복사

<h5>[ariaLabelBtn] 버튼 클릭시 [aria-label] 속성 값 복사</h5>
<button class="ariaLabelBtn" aria-label="ariaLabelBtn Content">
	ariaLabelBtn
</button>
			

/* getAttribute */
new Clipboard('.ariaLabelBtn', {
	text: function(trigger) {
		alert(trigger.getAttribute("class") + "Clicked!!\n\'" + trigger.getAttribute("aria-label") + "\' 복사됨!!");
		return trigger.getAttribute('aria-label');
	}
});
			

 

Events(이 페이지에 적용된 스크립트 소스 입니다.)

var clipboard = new Clipboard('.btn');

var btns = document.querySelectorAll('.btn');

clipboard.on('success', function(e) {
	e.clearSelection();
	console.info('Action:', e.action);
	console.info('Text:', e.text);
	console.info('Trigger:', e.trigger);
	showTooltip(e.trigger, '복사됨!');
});

clipboard.on('error', function(e) {
	console.error('Action:', e.action);
	console.error('Trigger:', e.trigger);
	showTooltip(e.trigger, fallbackMessage(e.action));
});

function showTooltip(elem, msg) {
	elem.setAttribute('class', 'btn tooltipped tooltipped-s');
	elem.setAttribute('aria-label', msg);
}

/* mouseleave btn [aria-label] attr remove */
for (var i = 0; i < btns.length; i++) {
	btns[i].addEventListener('mouseleave', function(e) {
		e.currentTarget.setAttribute('class', 'btn');
		e.currentTarget.removeAttribute('aria-label');
	});
}

/* nextElementSibling */
new Clipboard('.nextSiblingBtn', {
	target: function(trigger) {
		alert(trigger.getAttribute("class") + "Clicked!!\n\'" + document.querySelectorAll("#nb")[0].value + "\' 복사됨!!");
		return trigger.nextElementSibling;
	}
});

/* getAttribute */
new Clipboard('.ariaLabelBtn', {
	text: function(trigger) {
		alert(trigger.getAttribute("class") + "Clicked!!\n\'" + trigger.getAttribute("aria-label") + "\' 복사됨!!");
		return trigger.getAttribute('aria-label');
	}
});