ZeroClipboard를 사용하여 브라우저에서 클립보드로 복사하는 문제 해결

Zero Clipboard의 실현 원리
우선 Zero Clipboard의 압축 패키지를 다운로드하고 압축을 풀면 폴더에 있는 두 개의 파일: Zero Clipboard를 다운로드해야 합니다.js와 ZeroClipboard.swf를 프로젝트에 넣으세요.
그리고 복사 기능을 사용할 페이지에 Zero Clipboard의 js 파일을 도입합니다: Zero Clipboard.js는 다음과 같은 코드를 사용합니다.

<script type="text/javascript" src="ZeroClipboard.js"></script>

참고: 위의 ZeroClipboard.js, ZeroClipboard.swf는 같은 경로 아래에 두어야 합니다.동일한 경로가 아닌 경우 ZeroClipboard를 사용할 수 있습니다.setMoviePath("Flash 경로");ZeroClipboard를 설정합니다.swf 주소

Zero Clipboard 
var clip = new ZeroClipboard.Client(); //  
clip.setHandCursor( true ); //  
clip.setText(" "); //  。
//   button，  id。  button  。
//  button   input  ，  DOM  。
clip.glue("copy-botton"); //  

이렇게 하면 기본적인 기능이 실현되고 버튼을 누르면 설정된 텍스트를 복사할 수 있다.복사할 텍스트가 고정되어 있음을 알 수 있습니다. 만약 동적으로 바꾸려면 어떻게 해야 합니까? 예를 들어 입력 상자의 내용을 복사하는 것입니다.걱정하지 마세요. 다음에 말씀드릴게요.
Zero Clipboard의 고급 기능
1. Reposition () 방법
버튼 위에 Flash 버튼이 떠 있기 때문에 페이지 크기가 바뀌면 Flash 버튼이 잘못 눌려서 켜지지 않을 수 있습니다.괜찮습니다. Zero Clipboard는 Flash 단추의 위치를 다시 계산할 수 있는 Reposition () 방법을 제공합니다.우리는 그것을resize 이벤트에 연결할 수 있습니다.다음 코드는 jQuery에서 실행된resize 이벤트 재설정 단추 위치입니다.

$(window).resize(function(){
   clip.reposition();
});

2, hide() 및 show() 방법 두 가지 방법으로 Flash 단추를 숨기고 표시할 수 있습니다.여기서 show () 방법은reposition () 방법을 호출합니다.
3. setCSSEffects() 방법은 마우스를 단추로 옮기거나 눌렀을 때 Flash 단추가 가려져 있기 때문에 css':hover',':active'등 위조류가 효력을 상실할 수 있습니다.setCSSEffects() 방법은 이 문제를 해결하는 것입니다.우선 우리는 위조 클래스를 클래스로 바꾸어야 한다. 예를 들어 다음과 같다.
#copy-botton:hover{border-color:#FF6633;}//아래의':hover'를'.hover'#copy-botton으로 변경할 수 있습니다.hover{border-color:#FF6633;}
우리는 클립을 호출할 수 있다.setCSSEffects( true ); 이렇게 하면 Zero Clipboard는 자동으로 클래스를 처리합니다.호버를 위류로 삼다: 호버.
4. getHTML () 방법 만약 당신이 플래시를 실례로 하고 싶다면, Zero Clipboard의 부착 방법을 사용하지 않는다면, 이 방법은 도움이 될 것이다.이 매개변수는 Flash의 폭과 높이에 따라 두 개의 매개변수를 수용합니다.Flash에 해당하는 HTML 코드가 반환됩니다.예:
var html = clip.getHTML( 150, 20 );너는 innerHTML이나 직접 문서를 사용할 수 있다.write(); 내보내기를 수행합니다.다음은 테스트 출력을 조립한 HTML 코드입니다.
IE의 Flash JavaScript 통신 인터페이스에 버그가 있습니다.존재하는 DOM 요소에 Object 태그를 삽입해야 합니다.그리고 innerHTML에 쓰기 전에 이 요소가 appendChild 메서드가 DOM에 삽입되었는지 확인하십시오.
Zero Clipboard 이벤트 처리
Zero Clipboard는 이벤트를 사용자 정의 함수로 처리할 수 있는 이벤트를 제공합니다.Zero Clipboard 이벤트 처리 함수는 addEventListener()입니다.예를 들어 Flash를 완전히 로드하면 "load"이벤트가 발생합니다.clip.addEventListener("load", function(client) {alert("Flash 로드 완료!");};Zero Clipboard는 클립 객체를 매개 변수로 전송합니다.위의 "client"입니다.그리고'load'는'onLoad'로 쓸 수도 있고, 다른 사건도 그럴 수 있다.
기타 이벤트는 다음과 같습니다.
mouseOver 마우스로 이벤트 이동 mouseOut 마우스로 이벤트 이동 mouseDown 마우스로 이벤트 mouseUp 마우스를 누르면 이벤트 complete 복사 성공 이벤트를 놓습니다. 그 중에서 mouseOver 이벤트와complete 이벤트가 비교적 자주 사용됩니다.
앞에서 말했듯이 복제할 내용을 동적으로 바꿔야 한다면 마우스 오버 이벤트가 도움이 될 것이다.예를 들어 id를test로 하는 입력 상자의 값을 동적으로 복사해야 합니다. 마우스over할 때 값을 다시 설정할 수 있습니다.

clip.addEventListener( "mouseOver", function(client) {
    var test = document.getElementById("test");
    client.setText( test.value ); //  
});
// ：
clip.addEventListener( "complete", function(){
    alert(" ！");
});