Firefox, Safari 및 Chrome으로 클립 보드에 텍스트를 복사 / 넣으십시오.

StackOverflow https://stackoverflow.com/questions/127040

  •  02-07-2019
  •  | 
  •  

문제

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

도움이 되었습니까?

해결책

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

document.execCommand('copy');

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

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

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

보안상의 이유로 브라우저는 사용자가 어떤 종류의 작업을 수행하는 경우에만 복사 할 수 있습니다 (즉, 버튼을 클릭하는). 이를 수행하는 한 가지 방법은 텍스트를 복사하는 메소드를 호출하는 HTML 버튼에 onclick 이벤트를 추가하는 것입니다.

전체 예는 모양이 될 것입니다 

<html>
<head>
    <title>copy test</title>
</head>
<body>
    <button onclick="copier()">Copy</button>
    <textarea id="myText">Copy me PLEASE!!!</textarea>

    <script>
        function copier(){
            document.getElementById('myText').select();
            document.execCommand('copy');
        }
    </script>
</body>
</html>

다른 팁

보안상의 이유로 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;
}

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

출처는 현재 죽었습니다. http://bravo9.com/journal/copying-text-into-the-clipboard-with-javaScript-in-fire-safari-safari-ofero-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ (그리고 그렇습니다 Google 캐시)

온라인 스프레드 시트 훅 CTRL+C, Ctrl+V 이벤트 및 숨겨진 TextArea 컨트롤로 초점을 전송하고 이벤트가 페이스트 용으로 완료된 후에는 내용을 사본 또는 읽기 내용으로 원하는 새로운 클립 보드 내용으로 설정합니다.

또한보십시오 JavaScript를 사용하여 Firefox, Safari 및 Chrome에서 클립 보드를 읽을 수 있습니까?

2015 년 여름이었고 플래시를 둘러싼 혼란으로 인해이 질문에 완전히 사용하지 않는 새로운 답변을 추가 할 것이라고 생각했습니다.

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

Clipboard.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를 사용하면 클립 보드에 데이터를 저장할 수 있지만 보안 영향으로 인해 기본적으로 비활성화됩니다. 활성화하는 방법을 확인하십시오 "클립 보드에 자바 스크립트 액세스 권한 부여" 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에서, 나는 내가 Wild에서 본 다른 모든 코드 하이 라이터와 함께 할 것입니다. 그리고 내 사본을 클립 보드 버튼으로 제거 할 것입니다. :-(

(DP.SyntaxHiglighter의 클립 보드에 대한 사본도 이제 고장 났음을 알았습니다.)

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

이 링크 확인 :

http://kb.mozillazine.org/granting_javaScript_access_to_the_clipboard

모두가 말했듯이 보안상의 이유는 기본적으로 비활성화됩니다. 위의 링크는이를 활성화하는 방법에 대한 지침을 보여줍니다 (About : Config in user.js).

다행히도 "allestClipboardHelper"라는 플러그인이있어 몇 번의 클릭만으로도 쉽게 일할 수 있습니다. 그러나 여전히 웹 사이트 방문자에게 Firefox에서 액세스 권한을 활성화하는 방법에 대해 지시해야합니다.

나는 github를 사용했습니다 클립 내 필요에 따라 간단한 플래시 기반 버튼. 스타일이 필요하지 않고 삽입에 만족하는 경우 잘 작동합니다. 붙여 넣을 것 서버 측에서 미리.

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

플래시 솔루션의 약간의 개선은 SWFOBJECT를 사용하여 Flash 10을 감지하는 것입니다.

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

그런 다음 Flash 10으로 표시되면 JavaScript를 사용하여 충격파 객체를로드하십시오. Shockwave는 Lingo의 CopyToclipboard () 명령을 사용하여 클립 보드 (모든 버전에서)를 읽거나 쓸 수 있습니다.

http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp Flash 10 및 모든 플래시 활성화 브라우저와 함께 작동합니다.

또한 ZeroClipboard가 페이지 스크롤에 대해 언급 된 버그를 피하기 위해 플래시 영화가 더 이상 올바른 위치에 있지 않도록 업데이트되었습니다.

이 방법은 사용자가 버튼을 클릭하여이를 복사해야하기 때문에 사용자에게 편리하며 사악한 것은 없습니다.

플래시를 지원하면 사용할 수 있습니다 https://everyplay.com/assets/clipboard.swf FlashVars 텍스트를 사용하여 텍스트를 설정하십시오

https://everyplay.com/assets/clipboard.swf?text=it%20works

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

인터넷 익스플로러의 경우 : Window.clipboardData.SetData (dataformat, text) 및 Window.ClipboardData.getData (dataformat)

DataFormat의 텍스트 및 URL을 사용하여 GetData 및 SetData를 사용할 수 있습니다.

그리고 데이터를 삭제하려면 :

DataFormat 파일, HTML, 이미지, 텍스트 및 URL을 사용할 수 있습니다. 추신 : Window.ClipboardData.clearData (dataformat)를 사용해야합니다.

Window.ClipboardData 및 SWF 플래시 파일을 지원하지 않는 다른 경우 Windows 및 Mac의 경우 Keyboard에서 Control + C 버튼을 사용할 수도 있습니다.

애드온 코드 :

다른 사람이 Chrome Code에서 수행하는 방법을 찾고있는 경우 여기에 설명 된대로 NSICLIPBORDHELPER 인터페이스를 사용할 수 있습니다. 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>

선택을 저장하는 메모리 글로벌 변수 생성을 시도하면 다른 함수는 변수에 액세스하고 페이스트를 할 수 있습니다.

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

}

클립 보드 API 대체하도록 설계되었습니다 document.execCommand. Safari는 여전히 지원을 진행하고 있으므로 Spec Settles 및 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="https://stackoverflow.com/questions/127040/" rel="bookmark">Permalink</a>
<output></output>

보안상의 이유로 클립 보드 Permissions 클립 보드에서 읽고 쓸 필요가있을 수 있습니다. 스 니펫이 작동하지 않으면 샷을 줘 localhost 또는 그렇지 않으면 신뢰할 수있는 도메인.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top