꾸준하게, 차근차근

[JS&jQuery] 클립보드 복사 기능 구현(clipboard 라이브러리 사용) 본문

JS&jQuery

[JS&jQuery] 클립보드 복사 기능 구현(clipboard 라이브러리 사용)

jn4624 2021. 9. 11. 00:29

1. 라이브러리 설치 경로

https://clipboardjs.com/

 

clipboard.js

A modern approach to copy text to clipboard. No Flash. No frameworks. Just 3kb gzipped

clipboardjs.com

위 사이트에서 자신의 개발환경에 맞는 방법을 찾아 라이브러리를 설치하거나 Import하여 사용하면 된다.

필자는 보안성이 강한 개발환경으로 라이브러리를 다운로드 받아 필요한 파일만 Eclipse에 Import하여 사용하는 방법을 선택하였다.

 

 

 

위와 같이 필요한 파일만 Resource 파일에 옮겨두고

 

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%>
    
    <%-- Clipboard --%>
    <script type="text/javascript" charset="utf-8" src="${compoResourcePath}/clipboard/dist/clipboard.js"></script>
    <script type="text/javascript" charset="utf-8" src="${compoResourcePath}/clipboard/dist/clipboard.min.js"></script>

 

JSP를 별도로 만들어 위 Resource 파일들만 Import해놓은 후

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@include file="common/clipboard.jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <button class="btnCopyUrl" data-clipboard-text="www.naver.com">클립보드 복사</button>
    <button class="btnCopyUrl" data-clipboard-text="www.daum.net">클립보드 복사</button>
    <button class="btnCopyUrl" data-clipboard-text="www.google.com">클립보드 복사</button>
    
    <script>
        var clipboard = new ClipboardJS('.btnCopyUrl');
        
        clipboard.on('success', function(e){
            alert("클립보드에 복사되었습니다.");
        });
        
        clipboard.on('error', function(e){
            console.log(e);
        });
    </script>
</body>
</html>

 

사용될 JSP에 Include하여 사용하였다.

 

클립보드 복사 기능 소스는 Script 단락에 있는 것이 전부이며, <button> 태그 data-clipboard-text에 복사할 text가 정의되어 있어야 정상적으로 동작한다.

 

 

🙏 참조 ::

 

저작자표시

'JS&jQuery' 카테고리의 다른 글

[JS&jQuery] 하위 IFRAME 함수 호출(부모에서 자식 함수 실행)  (0) 2022.04.29
[JS&jQuery] 특정 날짜간 차이 구하기  (0) 2022.04.28
[JS&jQuery] 문자열 시간(HH:MM:SS) 정수형 초 단위(Second)로 변환  (0) 2021.09.10
[JS&jQuery] 배열의 중복제거  (0) 2021.04.29
[JS&jQuery] 정규식으로 URL 및 IP 유효성 체크  (0) 2021.02.07
'JS&jQuery' Related Articles more