[해피CGI][cgimall] 크로스 브라우징 클립보드 복사 Jquery 소스

설명

과거 클립보드 복사 버튼을 제작할 때 자바스크립트의 내장 함수를 사용하였으나,
브라우저가 다양해지고 버전이 높아짐에 따라 위 소스를 사용할 수 없게 되었습니다.

이를 해결하기 위해 플래시(SWF)파일을 이용한 ZeroClipboard 라는 API가 사용되었지만,
이또한 최근 브라우저마다 플래시 차단을 하는 경우가 있어 위 기능이 작동되지 않는 상황입니다.

이 소스는 Jquery를 이용하여 간단히 클립보드 복사를 할 수 있으며,
IE 11, Chrome, Safari, FireFox 브라우저에서 테스트되었습니다.


첨부파일 목록

index.html
jquery-3.2.1.min.js



사용방법 (첨부파일의 index.html 파일의 소스를 통해 확인가능)

1. HTML 파일 상단에 jquery-3.2.1.min.js 파일을 링크해줍니다.
   
   
   
    
2. A 태그나 INPUT 태그 등을 이용하여 버튼을 삽입한 뒤
   data-clipboard-text 속성을 이용하여 복사할 TEXT를 입력합니다.
   data-clipboard-text 속성은 HTML 기본 옵션을 제외하고 사용자에 따라 임의로 지정하면 됩니다.
   
   Jquery 선택자로 사용할 class도 입력해 줍니다.(clipboardBtn)
   
   
   
    
3. Jquery에서 TEXT 복사를 위해 사용할 TEXTAREA 태그를 화면에서 보이지 않게 숨겨놓습니다.
   
   
   
    
4. 아래처럼 간단한 Jquery 소스를 입력합니다.
   
   
   
    
5. 파일 저장 후 브라우저를 통해 기능을 테스트합니다.