Flash없이 클립 보드에 복사

Flash없이 클립 보드에 복사

---

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

---

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

---

나는 플래시 솔루션을 사용해 보았지만 너무 좋아하지 않았습니다. 너무 복잡하고 너무 느립니다. 내가 한 일은 텍스트 영역을 만들고 여기에 데이터를 넣고 브라우저 "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 지원을 참을성없이 기다리는 동안 ...}

---

이것은 Chrome, Firefox, Edge, IE 에서 아름답게 작동합니다.

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

The best resource of the unbelievable mess that's happening among browsers and the Clipboard can be seen here (caniuse.com) (→ Follow the comments under "Notes").
MDN says that basic support is "(YES)" for all browsers which is inaccurate cause one would expect at least the API to work, at all.

---

You can use a clipboard local to the HTML page. This allows you to copy/cut/paste content WITHIN the HTML page, but not from/to third party applications or between two HTML pages.

This is how you can write a custom function to do this (tested in chrome and firefox):

Here is the FIDDLE that demonstrates how you can do this.

I will also paste the fiddle here for reference.

---

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') will do what you want. But there was no directly usable examples in this thread without cruft, so here it is:

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')

---

There is not way around, you have to use flash. There is a JQuery plugin called jquery.copy that provided cross browser copy and paste by using a flash (swf) file. This is similar to how the syntax highlighter on my blog works.

Once you reference the jquery.copy.js file all you need to do to push data into the clipboard is run the following:

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

Nice and easy ;)

참고URL : https://stackoverflow.com/questions/6355300/copy-to-clipboard-without-flash