플래시를 사용하지 않고 선택한 텍스트를 클립 보드에 복사

플래시를 사용하지 않고 선택한 텍스트를 클립 보드에 복사합니다. 브라우저 간이어야합니다.

---

에서 텍스트를 선택 textarea하고 클립 보드에 복사 하는 버튼을 갖고 싶습니다 . 모든 브라우저에서 작동하고 플래시를 사용하지 않는 솔루션을 찾을 수없는 것 같습니다.

확실히 이것이 가능합니까? 나는 모든 곳에서 그것을 보았지만 플래시를 사용하는 것 같아요. 어떤 사람들은 그것을 가지고 있지 않기 때문에 가능하면 멀리하고 싶습니다.

이것이 내가 지금까지 가지고있는 것입니다. 단지 텍스트를 선택합니다.

function copyCode() {
  $("#output-code").focus();
  $("#output-code").select();
}

(초점은 꼭 필요한 것은 아닙니다)

---

execCommand ( '복사')

아주 새로운 옵션이 있습니다. 브라우저 간이지만 모든 사람이 브라우저를 업데이트하려면 시간이 걸립니다.

document.execCommand('copy');기능 을 사용하여 작동합니다. 이 기능을 사용하면 선택한 텍스트를 복사합니다. 이것은 단지 작동하지 않습니다 textarea(처럼의하지만 웹 페이지의 모든 선택한 텍스트와 span, p, div, 등).

Internet Explorer 10 이상, Chrome 43 이상, Opera 29 이상 및 Firefox 41 이상에서 사용할 수 있습니다 ( 여기에서execCommand 호환성 참조 ).

예

// Setup the variables
var textarea = document.getElementById("textarea");
var answer  = document.getElementById("copyAnswer");
var copy    = document.getElementById("copyBlock");
copy.addEventListener('click', function(e) {

   // Select some text (you could also create a range)
   textarea.select(); 

   // Use try & catch for unsupported browser
   try {

       // The important part (copy selected text)
       var ok = document.execCommand('copy');

       if (ok) answer.innerHTML = 'Copied!';
       else    answer.innerHTML = 'Unable to copy!';
   } catch (err) {
       answer.innerHTML = 'Unsupported Browser!';
   }
});

<textarea id="textarea" rows="6" cols="40">
Lorem ipsum dolor sit amet, eamsemper maiestatis no.
</textarea><br/>

<button id="copyBlock">Click to copy</button> <span id="copyAnswer"></span>
   

---

클라이언트의 클립 보드에 텍스트를 자동으로 복사하는 데 사용하지 않으려는 Flash 추가 기능을 사용해야합니다. ActiveX 구성 요소의 도움없이 클라이언트의 클립 보드를 자동으로 수정하는 웹 사이트는 보안 문제입니다. Active-x 구성 요소는 사용자의 컴퓨터에서 실행되는 프로그램이며 기술적으로 설치하려면 사용자의 동의가 필요합니다. 클립 보드가 운영 체제 구성 요소라는 점을 고려할 때 웹 브라우저가 기본적으로 웹 사이트를 하이재킹하는 것을 허용하지 않는다는 점에 만족하십시오.

사용자가 Flash를 사용하지 않거나 Flash를 사용하지 않거나 active-x를 사용하지 않는 경우 보안에 대한 편집증이있을 수 있으며 어쨌든 키보드를 엉망으로 만들고 싶지 않습니다. 이 시점에서 사용자는 웹 사이트에서 자동 또는 스크립트 기반 기능을 많이 사용하지 않는 데 익숙해집니다. 최종 사용자의 바램을 공개적으로 무시하지 않는 것이 가장 좋습니다.

다음 스택 오버플로 링크를 참조하십시오.

1. JavaScript에서 클립 보드에 어떻게 복사합니까?
2. 자바 스크립트에서 브라우저 간 플래시 감지

궁극적 인 대답은 Zero Clipboard를 사용하는 것입니다. 이것은 작고 보이지 않는 Flash 무비와 JavaScript를 사용하여 원하는 클립 보드 기능을 사용하는 라이브러리입니다. 라이브러리는 여기에서 사용할 수 있습니다. https://github.com/zeroclipboard/zeroclipboard 두 번째 링크는 Flash가 비활성화되었는지 여부를 감지하는 방법을 보여줍니다.이를 통해 JavaScript에 대해 경고 메시지를 표시 할 수 있습니다.

---

이제 @zenorocha의 Clipboard.js 가 있습니다.

사용하려면 page.html에서 스크립트를 다운로드하여 호출하십시오 (또는 bower 또는 npm으로 설치).

<script src="path_to_script/clipboard.min.js"></script>

script.js에서 새 트리거를 인스턴스화하십시오.

new Clipboard('.trigger');

그리고 몇 가지 사용 예를 보려면 http://zenorocha.github.io/clipboard.js/#usage 로 이동하십시오.

---

function copyTextToClipboard(text) {
    var textArea = document.createElement("textarea");
    textArea.style.position = 'fixed';
    textArea.style.top = 0;
    textArea.style.left = 0;  
    textArea.style.width = '2em';
    textArea.style.height = '2em'; 
    textArea.style.padding = 0;  
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';   
    textArea.style.background = 'transparent';
    textArea.value = text;
    textArea.id = 'ta';
    document.body.appendChild(textArea);
    //textArea.select();
    var range = document.createRange();
    range.selectNode(textArea);
    textArea.select();
    window.getSelection().addRange(range);
    try {
        var successful = document.execCommand('copy');
    } catch (err) {
         alert('Oops, unable to copy');
    }
    document.body.removeChild(textArea);
    return successful;
}

도움이 되었기를 바랍니다.

---

이것은 꽤 늦은 응답이지만 미래에 검색하고 데스크톱 및 모바일 장치 모두에서 작동하도록 execCommand ( 'copy') 이벤트를 구현하는 데 문제가있는 사람들을위한 것입니다.

크로스 브라우저, 모바일 친화적이며 외부 소스 또는 프로그램이 필요 없음

function CopyString(){
    var StringToCopyElement = document.getElementById('YourId');
    StringToCopyElement.select();

    if(document.execCommand('copy')){
        StringToCopyElement.blur();     
    }else{
        CopyStringMobile();
    }
}

function CopyStringMobile(){
    document.getElementById("YourId").selectionStart = 0;
    document.getElementById("YourId").selectionEnd = 999;
    document.execCommand('copy');

    if (window.getSelection) {
      if (window.getSelection().empty) {  // Chrome
        window.getSelection().empty();
      } else if (window.getSelection().removeAllRanges) {  // Firefox
        window.getSelection().removeAllRanges();
      }
    } else if (document.selection) {  // IE?
      document.selection.empty();
    }
}

이벤트를 발생시키려는 모든 항목에 대해 CopyString () 함수를 클릭 이벤트로 설정하십시오. 이것은 모바일 및 데스크톱 운영 체제 모두에서 사용할 수 있습니다.

설명

You need to have two different ways of going about selecting the string to copy because as of today, the method for doing so via desktop will not work for mobile devices. I have an if then function to catch if the desktop method worked and if not, to fire the code that will work for a mobile device. This method requires no downloads or links needed. Both methods highlight the text you're looking to copy then fires the copy command to your clipboard, being followed by un-selecting the string you're attempting to copy. You can mix up the code to your liking but this is the way of doing so.

ReferenceURL : https://stackoverflow.com/questions/6300213/copy-selected-text-to-the-clipboard-without-using-flash-must-be-cross-browser