Skip to content

CHICPRO

  • Life Log
  • Cycling Log
  • Photo Log
    • Portrait
    • Landscape
    • Flower
    • Etc
  • Coding Log
  • Information

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

2020-11-30 by 편리

개발 건을 진행하면서 이미지 등의 파일 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 관련 코드 등이다.

Post navigation

Previous Post:

PHP Router 비교

Next Post:

OPENDART api를 이용한 공시정보 가져오기

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Posts

  • SK 세븐모바일 유심 셀프교체
  • php 배열 연산에서 + 와 array_merge 의 차이
  • pcntl_fork 를 이용한 다중 프로세스 실행
  • 아이폰 단축어를 이용하여 주중 공휴일엔 알람 울리지 않게 하기
  • 구글 캘린더 전체일정 재동기화
  • OpenLiteSpeed 웹서버에 HTTP 인증 적용
  • OpenLiteSpeed 웹어드민 도메인 연결
  • WireGuard를 이용한 VPN 환경 구축
  • Ubuntu 22.04 서버에 OpenLiteSpeed 웹서버 세팅
  • 맥 vim 세팅

Recent Comments

  • 편리 on 업무관리용 그누보드 게시판 스킨
  • 임종섭 on 업무관리용 그누보드 게시판 스킨
  • 캐논 5D 펌웨어 | Dslr 펌웨어 업그레이드 방법 82 개의 베스트 답변 on 캐논 EOS 30D 펌웨어 Ver 1.0.6 , EOS 5D 펌웨어 Ver 1.1.1
  • Top 5 캐논 5D 펌웨어 Top 89 Best Answers on 캐논 EOS 30D 펌웨어 Ver 1.0.6 , EOS 5D 펌웨어 Ver 1.1.1
  • 편리 on 워드프레스 애니메이션 gif 파일을 mp4로 변환하여 출력하기
  • 임팀장 on 워드프레스 애니메이션 gif 파일을 mp4로 변환하여 출력하기
  • 편리 on Notepad++ NppFTP 플러그인 수동 설치
  • paul-j on Notepad++ NppFTP 플러그인 수동 설치
  • YS on Windows 10 iCloud 사진 저장 폴더 변경
  • 편리 on Docker를 이용한 Centos7 + httpd + php 5.4 개발환경 구축

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org
© 2025 CHICPRO | Built using WordPress and SuperbThemes