클립보드 복사 (모바일웹 / 웹 - clipboard.min.js ) 버전 라이브러리 > Web Development

본문 바로가기
  • kb@lovelet.com
사이트 내 전체검색

RESOURCES Web Development

클립보드 복사 (모바일웹 / 웹 - clipboard.min.js ) 버전 라이브러리

페이지 정보

본문

해당 URL를 사용자가 편리 하게 클릭 한번으로 복사 할 수 있는 기능이다.


해당 라이브러리를 다운로드 하고 아래 샘플 소스 페이지를 복사해서 붙여 넣기 한다음에 커스터마이징 하면 끝.


참고 사이트 : https://clipboardjs.com/


종류 별로 다양하게 클립보드를 복사 할 수 있으니 첨부파일을 참조하여 샘플 폴더를 참조 해보면 될 것 같다.



 <!-- 1. 클립보드 라이브러리 --> 

 <script type="text/javascript" src="<c:url value='../clipboard.min.js' />" charset="euc-kr"></script>


 <!-- 2. 클립보드 URL / 버튼 셋팅 -->

 <input id="foo" type="text" value="http://www.naver.com">

 <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">여기글을 복사</button>


 <!-- 3. 클립보드시 발생하는 이벤트 -->

 <script>

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

    clipboard.on('success', function(e) {

        alert("복사되었습니다.");

    });

    clipboard.on('error', function(e) {

        alert("실패하였습니다.");

    });

 </script>

Share Post:

댓글목록

profile_image

러브렛님의 댓글

러브렛 작성일 아이피 220.♡.88.174

본문 내용 중에서 변수명 수정해야함..

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

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

Sign In
OR
Don't have an account? SIGN UP

Keywords

Visits

접속자

Total Visits
1,886,839