클립보드 복사 (모바일웹 / 웹 - 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>
관련링크
- https://m.blog.naver.com/jinsil0323/220913125999 CLICKS : 40
- 이전글그누보드에서 사용중인 font awesome 차림표 22.04.06
- 다음글모바일 게시판의 상단의 게시판 제목에 링크 걸기 22.04.01
댓글목록
러브렛님의 댓글
러브렛 작성일 아이피 220.♡.88.174
본문 내용 중에서 변수명 수정해야함..
var clipboard = new Clipboard('.btn');
를
var clipboard = new ClipboardJS('.btn');