플래시 없이 클립보드에 복사

플래시 없이 클립보드에 복사

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

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

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

jQuery javascript 파트:

// 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>

이제 복사할 텍스트를 여기에 넣습니다.'함수가 될 수 있습니다.' 영역입니다.저한테는 잘 맞습니다.CTRL+C 조합을 하나만 만들면 됩니다.유일한 단점은 사이트에 보기 흉한 텍스트 영역이 표시된다는 것입니다.style="display:display" 스타일을 사용하면 복사 솔루션이 작동하지 않습니다.

플래시 없이 클립보드에 복사할 수 있도록 clipboard.js가 방금 릴리스되었습니다.

여기서 실제로 보기 > http://zenorocha.github.io/clipboard.js/ #sship-action

드디어 도착했습니다! (Safari 또는 IE8을 지원하지 않는 한... -_- )

이제 플래시 없이 클립보드 작업을 실제로 처리할 수 있습니다.다음은 관련 문서입니다.

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

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

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

^{클립보드 API의 X 브라우저 지원을 초조하게 기다리는 동안...}

---

This will work beautifully in **Chrome, Firefox, Edge, IE**

IE는 사용자에게 클립보드에 액세스하라는 메시지를 한 번만 표시합니다.
Safari(작성 당시 5.1)는 다음을 지원하지 않습니다.

/**
 * CLIPBOARD
 * https://stackoverflow.com/a/33337109/383904
 */
const clip = (val) => {  
  const area = document.createElement("textarea");
  area.value = val;
  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", (evt) => {
    evt.preventDefault();
    clip(evt.currentTarget.textContent);
  });
});

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

모든 브라우저(마임 유형만 처리할 수 있는 Firefox 제외)"plain/text"제가 테스트한 바로는)는 클립보드 API를 구현하지 않았습니다.즉, 다음을 사용하여 Chrome에서 클립보드 이벤트를 읽으려고 합니다.

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

slots: Uncaught TypeError: 잘못된 생성자

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

HTML 페이지의 로컬 클립보드를 사용할 수 있습니다.이렇게 하면 HTML 페이지 내에서 내용을 복사/잘라내기/붙여넣을 수 있지만 타사 응용프로그램 또는 두 HTML 페이지 간에는 내용을 복사/잘라내기/붙여넣을 수 없습니다.

다음은 사용자 정의 함수를 작성하여 이를 수행하는 방법입니다(크롬 및 파이어폭스에서 테스트됨).

이것은 당신이 어떻게 이것을 할 수 있는지 보여주는 FIDLE입니다.

참고할 수 있도록 여기에 피들도 붙여 놓겠습니다.

---

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>

---

제이에스

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

방법이 없습니다. 플래시를 사용해야 합니다.jQuery.copy라는 JQuery 플러그인은 플래시(swf) 파일을 사용하여 브라우저 간에 복사 및 붙여넣기를 제공합니다.이것은 내 블로그의 구문 형광펜이 작동하는 방식과 비슷합니다.

jquery.copy.js 파일을 참조하면 클립보드에 데이터를 푸시하기만 하면 다음을 실행할 수 있습니다.

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

착하고 쉬운 ;)

언급URL : https://stackoverflow.com/questions/6355300/copy-to-clipboard-without-flash