클립 보드에 데이터를 안전하게 복사하기위한 플래시 기반 ZeroClipboard의 HTML5 대안?

클립 보드에 데이터를 안전하게 복사하기위한 플래시 기반 ZeroClipboard의 HTML5 대안?

---

많은 환경 (iPhone, Android, IE10 등)에서 플래시가 출시되고있는 상황에서 플래시를 설치하지 않고도 클립 보드에 정보를 안전하게 복사 할 수있는 새로운 솔루션이 브라우저에 나올 예정입니까?

지금까지 ZeroClipboard를 사용해 왔지만 플래시가없는 뷰어가 더 많아 지고이 기능이 손상 될 것이 걱정되며 가능할 때마다 Flash에 의존하지 않기를 바랍니다.

---

그 이유는 클립 보드에 자동 복사하는 것은 매우 위험 할 수 있으므로 대부분의 브라우저 (IE 제외) *는 플래시를 사용하지 않는 한 어렵게 만듭니다.

당신 같은 많은 ZeroClipboard ,이 클립 보드 LMCButton 또한 백그라운드에서 작은 플래시 스크립트 실행을 사용합니다.

일반적인 해결책은 다음과 같습니다.

 function copyToClipboard (text) {
     window.prompt ("Copy to clipboard: Ctrl+C, Enter", text);
 }

다른 누군가 가 여기에서 질문을 했을 때 Jarek Milewski에게서 찾았 습니다.

* 예, IE에 대한 하나의 솔루션을 찾았지만 대부분의 최신 브라우저에서는 작동하지 않습니다 . 여기를 확인하십시오 .

---

이 답변이 조금 늦어지고 있음을 알고 있지만 이제 ZeroClipboard (Flash 기반)에 대한 새로운 현대적인 대안이 있습니다. Clipboard.js 는 종속성 이 없는 2kB 순수 JavaScript 대안입니다 .

---

clip-j라는 순수한 JavaScript 솔루션을 만들었습니다. 여기 있습니다. 기본적으로 그것이하는 일은 document.execCommand('copy');당신이 아무것도 보지 못하도록 만드는 몇 가지 다른 명령을 활용하는 것입니다. 코드는 다음과 같습니다.

function clip(text) {   
    var copyElement = document.createElement('input');      
    copyElement.setAttribute('type', 'text');   
    copyElement.setAttribute('value', text);    
    copyElement = document.body.appendChild(copyElement);   
    copyElement.select();   
    document.execCommand('copy');   
    copyElement.remove();
}

---

이 블로그 게시물 에서 HTML5에서 클립 보드로 작업하는 방법에 대한 심도있는 토론을 볼 수 있습니다 . 안타깝게도 여전히 클릭시 클립 보드에 이식 할 수 없습니다. 그러나 크롬과 파이어 폭스의 경우 사이트에 클립 보드에 액세스 할 수있는 권한을 부여 할 수있는 브라우저 확장을 만들 수 있으며 IE는 클립 보드에 복사 할 수 있도록 허용하지만 사용자에게 권한을 부여하라는 메시지를 표시합니다.

업데이트 :

이에 따르면 : https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand Firefox 41+, Chrome 42+ 및 IE 9+는 execCommand로 복사 명령을 지원합니다. 파이어 폭스와 크롬의 경우 클릭과 같은 사용자 작업에 의해 트리거되는 경우에만 작동하고 IE의 경우 클립 보드에 복사 할 권한을 요청하는 경고 대화 상자를 사용자에게 제공합니다.

---

execCommand를 사용하려면 먼저 페이지에서 무언가를 선택 ()해야하므로 마지막으로 클립 보드에 넣은 내용을 복사하지 않아도됩니다. 이 함수를 사용하여 입력 텍스트 상자의 ID를 함수에 전달하고 선택 () 한 다음 복사 명령을 수행합니다. 리스너를 추가하거나 코드를 더 복잡하게 만들 필요가 없습니다. document.execCommand ()는 활성화되거나 지원되지 않는 경우 false를 반환하므로 window.prompt를 백업 방법으로 사용할 수 있습니다.

function copyToClipboard(id) {
    var blnCopied;
    document.getElementById(id).select();
    blnCopied = document.execCommand("copy", false, null);
    if (blnCopied)
        alert('Link copied to clipboard');
    else
        window.prompt ("Copy to clipboard: Ctrl+C, Enter", jQuery("#"+id).val());
}

onclick = "copyToClipboard ( 'some_id')"와 함께 표준 "a"앵커 태그 사용

---

이 질문에 대한 훌륭한 답변 이 있으며이 스 니펫을 사용하기로 선택했습니다.

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

그러나 페이지에 부트 스트랩 선택이 있으면 해당 $temp.val($(element).text()).select()줄에 오류가 발생합니다.

위젯은 선택한 요소에서만 작동 할 수 있습니다.

.select ().trigger('select') 에 대한 jQuery 문서에 명시된대로 다음과 같이 대신 사용할 수 있습니다 .

$temp.val($(element).val()).trigger('select');

참고 URL : https://stackoverflow.com/questions/10729570/html5-alternative-to-flash-based-zeroclipboard-for-safe-copying-of-data-to-clipb