[JS] Clipboard.js 를 이용하여 클립보드 복사 후 툴팁 표시하기
input 이나 textarea 의 내용을 클립보드로 복사하기 위해 clipboard.js 를 사용한다. 기본 clipboard.js 의 기능에 복사 후 Copied 라는 툴팁이 표시되도록 수정했다. 코드는 아래와 같다.
Clipboard 데모 : http://demo.codepub.net/clipboard.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clipboard Demo</title>
<link rel="stylesheet" href="./css/clipboard.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.0/clipboard.min.js"></script>
<script src="./js/clipboard.tooltip.js"></script>
</head>
<body>
<div>
<input type="text" value="http://www.google.com" id="copy_text">
<button class="copy">COPY</button>
</div>
<script>
var clipboard = new Clipboard('.copy', {
target: function(trigger) {
return trigger.previousElementSibling;
}
});
clipboard.on('success',function(e) {
e.clearSelection();
showTooltip(e.trigger,'Copied!');
});
clipboard.on('error',function(e) {
showTooltip(e.trigger,fallbackMessage(e.action));
});
</script>
</body>
</html>
clipboard.html 파일의 소스코드이다. (more…)
