JavaScript는 복사 기능을 구현합니다.

브라우저의 호환성을 무시하고 각 브라우저의 복사 기능 지원을 살펴보세요.

1. IE 브라우저에는 세 가지 해결 방법이 있으며 코드는 다음과 같습니다.

[javascript]

function copy(txtid){

var txtObj = document.getElementById(txtid);

if(window.clipboardData){ // IE에서만 지원됩니다. Object, Firefox 및 Chrome은

을 지원하지 않습니다. //1.clipboardData 개체를 통해 복사합니다.

//window.clipboardData.clearData()

//window.clipboardData. setData("Text",txtObj.value);

                                                                        txtObj.select();

//document.execCommand("Copy") // IE에서만 지원되며 Firefox에서는 구문을 보고합니다. 오류, 크롬 실행 결과 false 반환(지원되지 않음)

//3. TextRange 객체를 통한 실시간 복사: 먼저 내용을 선택할 필요가 없습니다

txtObj.createTextRange().execCommand("복사");

}

}

함수 복사(txtid){

var txtObj = document.getElementById(txtid);

if(window.clipboardData) { // IE에서만 이 개체를 지원하고 Firefox 및 Chrome에서는 지원하지 않습니다

//1. ClipboardData 객체를 통해 복사

//window.clipboardData.clearData();

//window.clipboardData.setData("Text",txtObj.value);

//2. 문서 개체를 통해 복사: 먼저 중국어 텍스트를 선택한 다음 복사 명령을 실행합니다

//txtObj.select();

//document .execCommand("Copy"); // IE에서만 지원되며 Firefox는 구문 오류를 보고하고 Chrome 실행 결과는 false를 반환합니다(지원되지 않음)

//3. TextRange 객체를 통해: 먼저 콘텐츠를 선택할 필요가 없습니다.

txtObj.createTextRange().execCommand("Copy");

}

}

2. Firefox는 인터페이스 방식을 통해 구현됩니다. 보안상의 이유로 Firefox는 버전 17 이후부터 이 인터페이스를 닫습니다. 이전 버전도 사용할 수 있습니다. 코드는 다음과 같습니다:

[javascript]

varclip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard) ;

varclip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard); 사용자에게 정보를 제공하지 않습니다. 클립보드에 대한 작업을 제공합니다. 복사 기능에 대한 지원이 브라우저마다 동일하지 않다는 것을 알 수 있습니다.

Zero Clipboard 라이브러리

jhuckaby가 작성한 Zero Clipboard js 라이브러리는 Flash를 사용하여 콘텐츠를 클립보드에 복사합니다. 브라우저에 Flash 플러그인이 탑재되어 있으면 ActionScript는 JavaScript의 단점을 차단하고 브라우저 간 복사 호환성 문제를 해결합니다.

Zero Clipboard의 구현 원리: Zero Clipboard는 먼저 Flash 객체 라벨을 생성하여 투명한 Flash가 복사 버튼 위에 떠오를 수 있도록 합니다. 클릭한 것은 버튼이 아니라 Flash이기 때문에 필요한 내용이 Flash로 전송된 후 Flash를 통해 시스템 클립보드에 복사됩니다.

클립보드 제로 사용 방법

참고: Flash 기반이므로 Flash를 사용해야 합니다. 보안상의 이유로 웹 컨테이너(예: Apache, Tomcat)에서만 실행할 수 있으며, Flash를 직접 열면 버튼이 일시 중지된 애니메이션과 유사하다고 합니다. 설정을 클릭하고 신뢰할 수 있는 위치에 ZeroClipboard.swf를 추가해 보았는데 여전히 작동하지 않습니다. 로컬 브라우저에 문제가 있을 수 있습니다.

1> 압축된 Zero Clipboard 패키지를 다운로드하고 압축을 푼 후 ZeroClipboard.js 및 ZeroClipboard.swf라는 두 파일을 프로젝트에 넣습니다.

2>다음 코드인 Zero Clipboard.js 파일을 소개합니다: ;

참고: ZeroClipboard.js와 ZeroClipboard.swf는 동일한 경로에 배치되어야 합니다. 동일한 경로에 있지 않으면 ZeroClipboard.setMoviePath()를 사용하여 설정할 수 있습니다.

3> 다음과 같이 코드를 복사하세요.

[javascript]

varclip = new ZeroClipboard.Client(); // 새 클립 객체 생성

clip.setHandCursor( true ) / 복사할 텍스트를 설정합니다. 이는 텍스트 상자의 값일 수 있습니다.

clip.glue("copy-botton"); // 클립용 버튼을 등록합니다. 매개변수는 버튼 요소의 ID입니다. 버튼을 클릭하면 복사가 이루어집니다.

var clip = new ZeroClipboard.Client(); // 새 클립 객체 생성

clip.setHandCursor( true ) hello,world"); // 복사할 수 있는 텍스트를 설정합니다. 텍스트 상자의 값

clip.glue("copy-botton"); // 클립에 대한 버튼을 등록하고 매개변수는 버튼 요소의 ID입니다. 버튼을 클릭하면 복사됩니다.

4> 일반적으로 사용되는 Zero Clipboard 방법, 소스 코드를 직접 보는 것이 좋습니다:

reposition(): 페이지 크기가 변경될 때 방지, 플래시 버튼이 어긋날 수 있음

hide() : Flash 버튼 숨기기

show() : Flash 버튼 표시

setCSSEffects (): 플래시 폐색 버튼 스타일 실패 문제를 해결합니다(:hover를 .hover로 변경).

5>제로 클립보드 공통 이벤트, 이벤트 핸들러 함수는 addEventListener()입니다.

load: 플래시 버튼 로딩 이벤트

mouseOver: 마우스 위로 이동 이벤트

mouseOut: 마우스 밖으로 이동 이벤트

mouseDown: 마우스 아래로 이벤트

mouseUp: 마우스 놓기 이벤트

완료: 복사 성공 이벤트

jquery.zclip 라이브러리

ZeroClipboard는 네이티브 JavaScript 기반이므로 구현 시 jquery.zclip은 jQuery를 사용하여 Zero Clipboard를 캡슐화합니다. 프로젝트에서 이미 jQuery를 사용하고 있는 경우에는 jquery.zclip을 사용하는 것이 좋습니다.