clipboard.js를 이용한 클립보드에 텍스트 복사

개발 건을 진행하면서 이미지 등의 파일 url 정보를 클립보드로 복사해야 할 상황이 생겨서 clipboard.js를 사용하게 됐다. 전에는 input 이나 textarea의 데이터를 클립보드로 복사하는 데 사용했는데 이번에는 a 태그의 href 값을 클립보드로 복사해야만 하는 상황이었다. 기본 마크업은 아래와 같다.

<link href="https://unpkg.com/@primer/css/dist/primer.css" rel="stylesheet" />
<script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>

primer.css 는 tooltip 효과를 위해 추가됐다. 참고 : https://primer.style/css/components/tooltips

<a href="http://example.com/images/logo.png" class="copy-link">Link</a>

url 정보를 클립보드로 복사하기 위한 스크립트 코드는 아래와 같다.

<script>
$(function() {
    // a 태그 클릭 때 링크 이동 금지
    $(".copy-link").on("click", function(e) {
        e.preventDefault();
    });

    // tooltip 사라지게
    $(".copy-link").on("mouseleave, blur", function(e) {
        $(this).removeClass("tooltipped tooltipped-s").removeAttr("aria-label");
    });
});

var clipboard = new ClipboardJS(".copy-link", {
    text: function(trigger) {
        return trigger.getAttribute("href");
    }
});

clipboard.on('success', function(e) {
    // tooltip 표시    
    $(e.trigger).addClass("tooltipped tooltipped-s").attr("aria-label", "Copied!");
});
</script>

a 태그는 클릭 때 링크 이동을 하기 때문에 이것을 막는 코드와 clipboard.js 관련 코드, tooltip 관련 코드 등이다.