시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > JAVASCRIPT > javascript 소스창고 > JQuery > 크로스 브라우징 클립보드 복사 Jquery 소스 상세정보
사이트등록
현재접속자 새로고침
크로스 브라우징 클립보드 복사 Jquery 소스
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기 싸이월드 공감
소스분류 JQuery
다운로드 횟수 133 회
간단설명 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. 파일 저장 후 브라우저를 통해 기능을 테스트합니다.

     


네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
:화나는군요: :화나는군요: :화나는군요: :화나는군요:
2019-11-06 14:15:52
ㅇㅎ
찬성 1
반대 0
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
도배방지키
 57817591 보이는 도배방지키를 입력하세요.