FireFox, Safari 및 Chrome으로 클립 보드에 텍스트 복사 / 넣기

Internet Explorer에서 나는 클립 보드에 액세스하기 위해 clipboardData 객체를 사용할 수 있습니다. FireFox, Safari 및 / 또는 Chrome에서 어떻게 할 수 있습니까?

이제 대부분의 최신 브라우저에서이 작업을 쉽게 수행 할 수있는 방법이 있습니다.

document.execCommand('copy');

현재 선택된 텍스트를 복사합니다. 다음을 사용하여 textArea 또는 입력 필드를 선택할 수 있습니다.

document.getElementById('myText').select();

텍스트를 보이지 않게 복사하려면 textArea를 빠르게 생성하고, 상자에서 텍스트를 수정하고, 선택하고, 복사 한 다음 textArea를 삭제할 수 있습니다. 대부분의 경우이 textArea는 화면에 깜박이지 않습니다.

보안상의 이유로 브라우저는 사용자가 어떤 종류의 작업 (예 : 버튼 클릭)을 수행하는 경우에만 복사를 허용합니다. 이를 수행하는 한 가지 방법은 텍스트를 복사하는 메서드를 호출하는 html 버튼에 onClick 이벤트를 추가하는 것입니다.

전체 예 :

function copier(){
  document.getElementById('myText').select();
  document.execCommand('copy');
}

<button onclick="copier()">Copy</button>
<textarea id="myText">Copy me PLEASE!!!</textarea>

보안상의 이유로 Firefox는 클립 보드에 텍스트를 넣는 것을 허용하지 않습니다. 그러나 Flash를 사용하는 해결 방법이 있습니다.

function copyIntoClipboard(text) {

    var flashId = 'flashId-HKxmj5';

    /* Replace this with your clipboard.swf location */
    var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';

    if(!document.getElementById(flashId)) {
        var div = document.createElement('div');
        div.id = flashId;
        document.body.appendChild(div);
    }
    document.getElementById(flashId).innerHTML = '';
    var content = '<embed src="' + 
        clipboardSWF +
        '" FlashVars="clipboard=' + encodeURIComponent(text) +
        '" width="0" height="0" type="application/x-shockwave-flash"></embed>';
    document.getElementById(flashId).innerHTML = content;
}

유일한 단점은 Flash를 활성화해야한다는 것입니다.

소스는 현재 죽었습니다 : http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ ( Google 캐시도 마찬가지입니다. )

온라인 스프레드 시트는 Ctrl + C, Ctrl + V 이벤트를 연결하고 포커스를 숨겨진 TextArea 컨트롤로 전송하고 해당 내용을 복사 할 새 클립 보드 내용으로 설정하거나 이벤트가 붙여 넣기를 완료 한 후 내용을 읽습니다.

또한 참조 는 자바 스크립트를 사용하여 파이어 폭스, 사파리와 크롬에서 클립 보드를 읽을 수 있습니까?

2015 년 여름, Flash를 둘러싼 혼란이 너무 많아서이 질문에 대한 새로운 답변을 추가하여 완전히 사용하지 않을 것이라고 생각했습니다.

클립 보드 .js는 텍스트 또는 html 데이터를 클립 보드에 복사 할 수있는 멋진 유틸리티입니다. 사용하기 매우 쉽습니다. .js를 포함하고 다음과 같이 사용하십시오.

<button id='markup-copy'>Copy Button</button>

<script>
document.getElementById('markup-copy').addEventListener('click', function() {
  clipboard.copy({
    'text/plain': 'Markup text. Paste me into a rich text editor.',
    'text/html': '<i>here</i> is some <b>rich text</b>'
  }).then(
    function(){console.log('success'); },
    function(err){console.log('failure', err);
  });

});
</script>

클립 보드 .js 도 GitHub 에 있습니다.

2017 년에는 이렇게 할 수 있습니다 (이 스레드는 거의 9 년이 되었기 때문에 이렇게 말하세요!)

function copyStringToClipboard (string) {
    function handler (event){
        event.clipboardData.setData('text/plain', string);
        event.preventDefault();
        document.removeEventListener('copy', handler, true);
    }

    document.addEventListener('copy', handler, true);
    document.execCommand('copy');
}

이제 복사하려면 copyStringToClipboard('Hello World')

setData선 을 발견하고 다른 데이터 유형을 설정할 수 있는지 궁금하다면 대답은 '예'입니다.

Firefox에서는 클립 보드에 데이터를 저장할 수 있지만 보안상의 이유로 기본적으로 비활성화되어 있습니다. "클립 보드에 대한 JavaScript 액세스 권한 부여" 에서 활성화하는 방법을 참조하십시오.Mozilla Firefox 기술 자료의 .

amdfan에서 제공하는 솔루션은 사용자가 많고 브라우저를 구성 할 수없는 경우에 가장 적합합니다. 사용자가 기술에 정통한 경우 클립 보드를 사용할 수 있는지 테스트하고 설정 변경 링크를 제공 할 수 있습니다. JavaScript 편집기 TinyMCE 는이 접근 방식을 따릅니다.

copyIntoClipboard () 함수는 Flash 9에서 작동하지만 Flash Player 10의 출시로 인해 손상된 것 같습니다. 다음은 새 Flash Player에서 작동하는 솔루션입니다.

http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/

복잡한 솔루션이지만 작동합니다.

이 솔루션 중 어느 것도 실제로 작동 하지 않는다고 말해야합니다 . 수락 된 답변에서 클립 보드 솔루션을 사용해 보았지만 Flash Player 10에서는 작동하지 않습니다. ZeroClipboard도 시도해 보았고 잠시 동안 매우 만족했습니다.

현재 내 사이트 ( http://www.blogtrog.com) 에서 사용하고 있습니다 . )에서 사용하고 있지만 이상한 버그를 발견했습니다. ZeroClipboard가 작동하는 방식은 페이지의 요소 상단에 보이지 않는 플래시 개체를 배치하는 것입니다. 내 요소가 이동하면 (예 : 사용자가 창 크기를 조정하고 항목이 올바르게 정렬 된 경우) ZeroClipboard 플래시 개체가 엉망이되어 더 이상 개체를 덮지 않습니다. 아마도 원래 있던 자리에 여전히 남아있을 것 같습니다. 그들은 그것을 막거나 요소에 다시 붙이는 코드를 가지고 있지만 제대로 작동하지 않는 것 같습니다.

그래서 ... BlogTrog의 다음 버전에서는 내가 야생에서 본 다른 모든 코드 하이 라이터를 따라하고 Copy to Clipboard 버튼을 제거 할 것 같습니다. :-(

(dp.syntaxhiglighter의 Copy to Clipboard도 깨졌습니다.)

너무 오래된 질문이지만 어디서도이 답변을 보지 못했습니다 ...

이 링크를 확인하십시오.

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

모두가 말했듯이 보안상의 이유로 기본적으로 비활성화되어 있습니다. 위의 링크는 활성화 방법에 대한 지침을 보여줍니다 (firefox 또는 user.js에서 about : config 편집).

다행히도 "AllowClipboardHelper"라는 플러그인이있어 몇 번의 클릭만으로 작업을 쉽게 할 수 있습니다. 그러나 파이어 폭스에서 액세스를 활성화하는 방법을 웹 사이트 방문자에게 알려야합니다.

최신 document.execCommand ( "copy") 및 jQuery를 사용하십시오. 이 stackoverflow 답변보기

var ClipboardHelper = { // as Object

copyElement: function ($element)
{
   this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
    var $tempInput =  $("<textarea>");
    $("body").append($tempInput);
    $tempInput.val(text).select();
    document.execCommand("copy");
    $tempInput.remove();
}};

전화하는 방법 :

 ClipboardHelper.copyText('Hello\nWorld');
 ClipboardHelper.copyElement($('body h1').first());

// JQUERY DOCUMENT
;(function ( $, window, document, undefined ) {
  
  var ClipboardHelper = {

    copyElement: function ($element)
    {
       this.copyText($element.text())
    },
    copyText:function(text) // Linebreaks with \n
    {
        var $tempInput =  $("<textarea>");
        $("body").append($tempInput);
      
        //todo prepare Text: remove double whitespaces, trim
        
        $tempInput.val(text).select();
        document.execCommand("copy");
        $tempInput.remove();
    }
};

    $(document).ready(function()
    {
         var $body=$('body');
         
        $body.on('click', '*[data-copy-text-to-clipboard]', function(event) 
        {
            var $btn=$(this);
            var text=$btn.attr('data-copy-text-to-clipboard');
            ClipboardHelper.copyText(text);
        });
      
        $body.on('click', '.js-copy-element-to-clipboard', function(event) 
        {
            ClipboardHelper.copyElement($(this));
        });

    });


})( jQuery, window, document );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<span data-copy-text-to-clipboard=
"Hello
 World">
  Copy Text
</span>
<br><br>
<span class="js-copy-element-to-clipboard">
Hello
World 
Element
</span>

나는 Github의 Clippy 를 사용 하여 간단한 Flash 기반 버튼을 사용했습니다. 스타일링이 필요하지 않고 미리 서버 측에 붙여 넣을 항목 을 삽입 하는 것이 만족 스러우면 잘 작동 합니다.

플래시 솔루션에서 약간 개선 된 점은 swfobject를 사용하여 플래시 10을 감지하는 것입니다.

http://code.google.com/p/swfobject/

플래시 10으로 표시되면 자바 스크립트를 사용하여 Shockwave 개체를로드 해보세요. Shockwave는 lingo의 copyToClipboard () 명령을 사용하여 클립 보드 (모든 버전)를 읽고 쓸 수 있습니다.

http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp 는 Flash 10 및 모든 Flash 지원 브라우저에서 작동합니다.

또한 ZeroClipboard가 업데이트되어 페이지 스크롤에 대해 언급 된 버그로 인해 Flash 동영상이 더 이상 올바른 위치에 있지 않습니다.

이 방법은 사용자가 단추를 클릭하여 복사하도록 "요구"하기 때문에 사용자에게 편리하고 사악한 일이 발생하지 않습니다.

선택 사항을 저장하는 메모리 전역 변수를 만들어보십시오. 그러면 다른 함수가 변수에 액세스하고 예를 들어 붙여 넣기를 수행 할 수 있습니다.

var memory = '';//outside the functions but within the script tag.

function moz_stringCopy(DOMEle,firstPos,secondPos) {

var copiedString = DOMEle.value.slice(firstPos, secondPos);
memory = copiedString;

}

function moz_stringPaste(DOMEle, newpos) {

    DOMEle.value = DOMEle.value.slice(0,newpos) + memory + DOMEle.value.slice(newpos);

}

플래시를 지원하는 경우 https://everyplay.com/assets/clipboard.swf 를 사용하고 flashvars 텍스트를 사용하여 텍스트를 설정할 수 있습니다.

https://everyplay.com/assets/clipboard.swf?text=It%20Works

그게 내가 복사하는 데 사용하는 것이며 다음 옵션을 지원하지 않는 경우 추가로 설정할 수 있습니다.

Internet Explorer의 경우 : window.clipboardData.setData (DataFormat, Text) 및 window.clipboardData.getData (DataFormat)

DataFormat의 Text 및 Url을 사용하여 getData 및 setData를 사용할 수 있습니다.

데이터를 삭제하려면 :

DataFormat의 파일, HTML, 이미지, 텍스트 및 URL을 사용할 수 있습니다. 추신 : 당신은 사용할 필요가 window.clipboardData.clearData (DataFormat);

그리고 window.clipboardData 및 swf 플래시 파일을 지원하지 않는 다른 경우에는 키보드의 control + c 버튼을 사용할 수 있으며 Mac의 경우 command + c

애드온 코드에서 :

다른 사람이 크롬 코드에서이를 수행하는 방법을 찾고 있다면 여기에 설명 된대로 nsIClipboardHelper 인터페이스를 사용할 수 있습니다. https://developer.mozilla.org/en-US/docs/Using_the_Clipboard

사용 document.execCommand('copy'). 최신 버전에서 지원 Chrome, Firefox, Edge,와 Safari.

function copyText(text){
  function selectElementText(element) {
    if (document.selection) {
      var range = document.body.createTextRange();
      range.moveToElementText(element);
      range.select();
    } else if (window.getSelection) {
      var range = document.createRange();
      range.selectNode(element);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
    }
  }
  var element = document.createElement('DIV');
  element.textContent = text;
  document.body.appendChild(element);
  selectElementText(element);
  document.execCommand('copy');
  element.remove();
}


var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
  copyText(txt.value);
})

<input id="txt" value="Hello World!" />
<button id="btn">Copy To Clipboard</button>

클립 보드 API 는 document.execCommand. Safari는 여전히 지원을 위해 노력하고 있으므로 사양이 안정되고 Safari가 구현을 완료 할 때까지 대체를 제공해야합니다.

const permalink = document.querySelector('[rel="bookmark"]');
const output = document.querySelector('output');
permalink.onclick = evt => {
  evt.preventDefault();
  window.navigator.clipboard.writeText(
    permalink.href
  ).then(() => {
    output.textContent = 'Copied';
  }, () => {
    output.textContent = 'Not copied';
  });
};

<a href="/programming/127040/" rel="bookmark">Permalink</a>
<output></output>

보안상의 이유로 클립 보드 Permissions에서 읽고 쓰기 위해 클립 보드 가 필요할 수 있습니다. 스 니펫이 작동하지 않는 경우 해당 localhost도메인 또는 신뢰할 수있는 도메인을 제공합니다.

Studio.201의 @David의 탁월한 답변을 바탕으로 Safari, FF 및 Chrome에서 작동합니다. 또한 textarea화면 밖에 배치 하여 깜박임이 발생하지 않도록합니다 .

// ================================================================================
// ClipboardClass
// ================================================================================
var ClipboardClass = (function() {


   function copyText(text) {
    // Create temp element off-screen to hold text.
        var tempElem = $('<textarea style="position: absolute; top: -8888px; left: -8888px">');
        $("body").append(tempElem);

        tempElem.val(text).select();
        document.execCommand("copy");
        tempElem.remove();
   }


    // ============================================================================
   // Class API
   // ============================================================================
    return {
        copyText: copyText
    };
})();