Flash없이 클립 보드에 복사

클립 보드에 복사 할 수있는 많은 솔루션을 찾았지만 모두 플래시를 사용하거나 웹 사이트 측에서 사용할 수 있습니다. 플래시없이 자동으로 클립 보드에 메서드 복사를 찾고 있으며 사용자 측에서는 사용자 스크립트 및 물론 브라우저 간입니다.

플래시 없이는 대부분의 브라우저에서 불가능합니다. 사용자의 클립 보드는 암호 또는 신용 카드 번호와 같은 항목을 포함 할 수 있으므로 보안 관련 리소스입니다. 따라서 브라우저는 당연히 자바 스크립트 액세스를 허용하지 않습니다 (일부는 사용자가 확인했음을 알리는 경고 메시지 또는 서명 된 자바 스크립트 코드를 허용하지만 그 중 어느 것도 크로스 브라우저가 아닙니다).

나는 플래시 솔루션을 시도했지만 너무 좋아하지 않았습니다. 너무 복잡하고 너무 느립니다. 내가 한 일은 텍스트 영역을 만들고 여기에 데이터를 넣고 브라우저 "CTRL + C"동작을 사용하는 것이 었습니다.

jQuery 자바 스크립트 부분 :

// catch the "ctrl" combination keydown
$.ctrl = function(key, callback, args) {
    $(document).keydown(function(e) {
        if(!args) args=[]; // IE barks when args is null
        if(e.keyCode == key && e.ctrlKey) {
            callback.apply(this, args);
            return false;
        }
    });
};

// put your data on the textarea and select all
var performCopy = function() {
    var textArea = $("#textArea1");
    textArea.text('PUT THE TEXT TO COPY HERE. CAN BE A FUNCTION.');
    textArea[0].focus();
    textArea[0].select();
};

// bind CTRL + C
$.ctrl('C'.charCodeAt(0), performCopy);

HTML 부분 :
<textarea id="textArea1"></textarea>

이제 복사 할 내용을 'PUT THE TEXT TO COPY HERE'에 입력하세요. 기능이 될 수 있습니다. ' 지역. 나를 위해 잘 작동합니다. 하나의 CTRL + C 조합을 만들어야합니다. 유일한 단점은 사이트에보기 흉한 텍스트 영역이 표시된다는 것입니다. style = "display : none"을 사용하면 복사 솔루션이 작동하지 않습니다.

클립 보드 .js 는 플래시 없이도 클립 보드에 복사 할 수 있도록 출시되었습니다.

여기에서 실제 작동을 확인하십시오> http://zenorocha.github.io/clipboard.js/#example-action

드디어 여기! (Safari 또는 IE8을 지원하지 않는 한 ... -_-)

이제 실제로 Flash없이 클립 보드 작업을 처리 할 수 ​​있습니다. 관련 문서는 다음과 같습니다.

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=ko

https://msdn.microsoft.com/en-us/library/hh801227%28v=vs.85%29.aspx#copy

^{클립 보드 API 의 Xbrowser 지원을 참을성없이 기다리는 동안 ...}

IE 는 사용자에게 클립 보드에 액세스하라는 메시지를 한 번만 표시합니다.
사파리 (글을 쓰는 시점에서 5.1) 을 지원하지 않습니다 execCommand에 대한copy/cut

/**
 * CLIPBOARD
 * https://stackoverflow.com/a/33337109/383904
 */
const clip = e => {
  e.preventDefault();
  
  const cont = e.target.innerHTML;
  const area = document.createElement("textarea");
  
  area.value = e.target.innerHTML; // or use .textContent
  document.body.appendChild(area);
  area.select();
 
  if(document.execCommand('copy')) console.log("Copied to clipboard");
  else prompt("Copy to clipboard:\nSelect, Cmd+C, Enter", cont); // Saf, Other
  
  area.remove();
};


[...document.querySelectorAll(".clip")].forEach(el => 
  el.addEventListener("click", clip)
);

<a class="clip" href="#!">Click an item to copy</a><br>
<a class="clip" href="#!"><i>Lorem</i></a><br>
<a class="clip" href="#!"><b>IPSUM</b></a><br>

<textarea placeholder="Paste here to test"></textarea>

(만 입력 마임을 처리 할 수있는 파이어 폭스를 제외한 모든 브라우저 "plain/text"제가 테스트 한대로까지)의 한 구현되지 클립 보드 API를 . 즉, Chrome에서 클립 보드 이벤트를 읽으려고합니다.

var clipboardEvent = new ClipboardEvent("copy", {
        dataType: "plain/text",
        data: "Text to be sent to clipboard"
});

throws : Uncaught TypeError : Illegal constructor

브라우저와 클립 보드 사이에서 발생 하는 믿을 수없는 혼란 에 대한 최고의 리소스는 여기 (caniuse.com)에서 볼 수 있습니다 (→ "Notes" 아래의 주석을 따르십시오 ).
MDN은 기본 지원이 모든 브라우저에 대해 "(예)" 라고 말합니다. 부정확 한 원인은 최소한 API가 작동 할 것으로 기대합니다.

HTML 페이지에 로컬 클립 보드를 사용할 수 있습니다. 이를 통해 HTML 페이지 내에서 콘텐츠를 복사 / 잘라 내기 / 붙여 넣기 할 수 있지만 타사 애플리케이션간에 또는 두 HTML 페이지 간에는 복사 할 수 없습니다.

다음은이를 수행하는 사용자 정의 함수를 작성하는 방법입니다 (Chrome 및 Firefox에서 테스트 됨).

여기입니다 뿐인 이 작업을 수행 할 수있는 방법을 보여줍니다.

참고 용으로 여기에 바이올린을 붙여 넣겠습니다.

HTML

<p id="textToCopy">This is the text to be copied</p>
<input id="inputNode" type="text" placeholder="Copied text will be pasted here" /> <br/>

<a href="#" onclick="cb.copy()">copy</a>
<a href="#" onclick="cb.cut()">cut</a>
<a href="#" onclick="cb.paste()">paste</a>

JS

function Clipboard() {
    /* Here we're hardcoding the range of the copy
    and paste. Change to achieve desire behavior. You can
    get the range for a user selection using
    window.getSelection or document.selection on Opera*/
    this.oRange = document.createRange();
    var textNode = document.getElementById("textToCopy");
    var inputNode = document.getElementById("inputNode");
    this.oRange.setStart(textNode,0);
    this.oRange.setEndAfter(textNode);
    /* --------------------------------- */
}

Clipboard.prototype.copy = function() {
    this.oFragment= this.oRange.cloneContents();
};

Clipboard.prototype.cut = function() {
    this.oFragment = this.oRange.extractContents();
};

Clipboard.prototype.paste = function() {
    var cloneFragment=this.oFragment.cloneNode(true)
    inputNode.value = cloneFragment.textContent;
};

window.cb = new Clipboard();

document.execCommand('copy')당신이 원하는 것을 할 것입니다. 그러나이 쓰레드에는 엉터리없이 직접 사용할 수있는 예제가 없었으므로 다음과 같습니다.

var textNode = document.querySelector('p').firstChild
var range = document.createRange()
var sel = window.getSelection()

range.setStart(textNode, 0)
range.setEndAfter(textNode)
sel.removeAllRanges()
sel.addRange(range)
document.execCommand('copy')

주위에 방법이 없습니다, 당신은 플래시를 사용해야합니다. 플래시 (swf) 파일을 사용하여 브라우저 간 복사 및 붙여 넣기를 제공하는 jquery.copy 라는 JQuery 플러그인이 있습니다. 이것은 내 블로그의 구문 하이 라이터가 작동하는 방식과 유사합니다.

jquery.copy.js 파일을 참조하면 데이터를 클립 보드로 푸시하기 위해 다음을 실행하면됩니다.

$.copy("some text to copy");

좋고 쉬운;)