>

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

확실히 가능합니까? 나는 모든 곳에서 그것을 보았지만 플래시를 사용하고 있다고 생각합니다. 플래시를 사용하는 사람도 없기 때문에 가능하면 멀리하고 싶습니다.

이것은 지금까지 내가 가진 것입니다-그것은 단지 텍스트를 선택합니다 :

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

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

  • 답변 # 1

    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>
      
    
    

  • 답변 # 2

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

    사용자가 Flash를 사용하지 않거나 Flash를 사용하지 않거나 active-x를 사용하지 않으면 보안에 대한 편집증 일 가능성이 있으며 어쨌든 자신의 키보드를 망칠 필요는 없습니다. 이 시점에서 사용자는 웹 사이트에서 자동 또는 스크립트 기반 기능을 많이 사용하지 않는 데 익숙해졌습니다. 최종 사용자의 희망을 공개적으로 무시하지 않는 것이 가장 좋습니다.

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

    <올>

    자바 스크립트로 클립 보드에 복사하려면 어떻게합니까?

    자바 스크립트에서 교차 브라우저 플래시 감지

    최고의 대답은 작은 클립 보드 Flash 비디오와 JavaScript를 사용하여 원하는 클립 보드 기능을 사용하는 라이브러리 인 Zero Clipboard를 사용하는 것입니다. 라이브러리는 다음 위치에 있습니다. https://github.com/zeroclipboard/zeroclipboard 두 번째 링크는 Flash가 비활성화되어 있는지 또는 설치되어 있지 않은지를 감지하는 방법을 보여줍니다. JavaScript와 같은 경고 메시지를 표시 할 수 있습니다.

  • 답변 # 3

    이제 @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

  • 답변 # 4

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

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

  • 답변 # 5

    이것은 꽤 늦게 응답하지만 미래에 검색하고 데스크톱 및 모바일 장치 모두에서 작동하도록 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 () 함수를 클릭 이벤트로 설정하십시오. 모바일 및 데스크톱 운영 체제 모두에서 사용할 수 있습니다.

    설명

    오늘날, 데스크탑을 통한 방법은 모바일 장치에서 작동하지 않기 때문에 복사 할 문자열을 선택하는 두 가지 방법이 필요합니다. 데스크톱 방법이 작동했는지 파악하고 그렇지 않은 경우 모바일 장치에서 작동하는 코드를 실행하는 if 함수가 있습니다. 이 방법은 다운로드 나 링크가 필요하지 않습니다. 두 방법 모두 복사하려는 텍스트를 강조 표시 한 다음 클립 보드에 복사 명령을 실행 한 다음 복사하려는 문자열을 선택 취소합니다. 원하는대로 코드를 혼합 할 수 있지만 이렇게하는 방법입니다.

관련 자료

  • 이전 c++ - 다중 상속을 사용할 때 어떻게 죽음의 다이아몬드를 피할 수 있습니까?
  • 다음 javascript - 단위 테스트 각도에서 Karma와 함께 재료 구성 요소를 작동시키는 방법