jQuery를 사용하여 텍스트를 클립 보드에 복사하는 방법

질문 : jQuery를 사용하여 클립 보드에 복사 버튼 클릭

---

div 내부의 텍스트를 클립 보드에 복사하려면 어떻게해야합니까? div가 있고 클립 보드에 텍스트를 추가 할 링크를 추가해야합니다. 이에 대한 해결책이 있습니까?

<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<a class="copy-text">copy Text</a>

텍스트 복사를 클릭 한 다음

Ctrl

+ V를 누르면 붙여 넣어야합니다.

답변

---

2016 년 수정

2016 년부터는 대부분의 브라우저에서 선택 항목에서 작동 document.execCommand("copy") 를 사용하여 프로그래밍 방식으로 선택한 텍스트를 클립 보드에 복사 할 수 있으므로 대부분의 브라우저에서 텍스트를 클립 보드에 복사 할 수 있습니다.

브라우저의 다른 작업 (예 : 새 창 열기)과 마찬가지로 클립 보드에 복사는 특정 사용자 작업 (예 : 마우스 클릭)을 통해서만 수행 할 수 있습니다. 예를 들어 타이머를 통해 수행 할 수 없습니다.

다음은 코드 예입니다.

 

document.getElementById("copyButton").addEventListener("click", function() {
    copyToClipboard(document.getElementById("copyTarget"));
});

function copyToClipboard(elem) {
	  // create hidden text element, if it doesn't already exist
    var targetId = "_hiddenCopyText_";
    var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
    var origSelectionStart, origSelectionEnd;
    if (isInput) {
        // can just use the original source element for the selection and copy
        target = elem;
        origSelectionStart = elem.selectionStart;
        origSelectionEnd = elem.selectionEnd;
    } else {
        // must use a temporary form element for the selection and copy
        target = document.getElementById(targetId);
        if (!target) {
            var target = document.createElement("textarea");
            target.style.position = "absolute";
            target.style.left = "-9999px";
            target.style.top = "0";
            target.id = targetId;
            document.body.appendChild(target);
        }
        target.textContent = elem.textContent;
    }
    // select the content
    var currentFocus = document.activeElement;
    target.focus();
    target.setSelectionRange(0, target.value.length);
    
    // copy the selection
    var succeed;
    try {
    	  succeed = document.execCommand("copy");
    } catch(e) {
        succeed = false;
    }
    // restore original focus
    if (currentFocus && typeof currentFocus.focus === "function") {
        currentFocus.focus();
    }
    
    if (isInput) {
        // restore prior selection
        elem.setSelectionRange(origSelectionStart, origSelectionEnd);
    } else {
        // clear temporary content
        target.textContent = "";
    }
    return succeed;
}

input {
  width: 400px;
}

<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">

다음은 좀 더 고급 데모입니다 : https://jsfiddle.net/jfriend00/v9g1x0o6/

또한 클립 보드 .js 를 사용하여이를 수행하는 사전 빌드 된 라이브러리를 얻을 수도 있습니다.

답변의 오래된 역사적 부분

보안상의 이유로 최신 브라우저에서는 JavaScript를 통해 클립 보드에 직접 복사하는 것이 허용되지 않습니다. 가장 일반적인 해결 방법은 직접 사용자 클릭에 의해서만 트리거 될 수있는 클립 보드로 복사하기 위해 Flash 기능을 사용하는 것입니다.

이미 언급했듯이 ZeroClipboard 는 복사를 수행하기 위해 Flash 객체를 관리하는 데 널리 사용되는 코드 세트입니다. 나는 그것을 사용했다. Flash가 브라우징 장치 (모바일 또는 태블릿 제외)에 설치되어 있으면 작동합니다.

다음으로 가장 일반적인 해결 방법은 클립 보드 바인딩 된 텍스트를 입력 필드에 배치하고 포커스를 해당 필드로 이동 한 다음 사용자에게 Ctrl + C 를 눌러 텍스트를 복사하도록 안내하는 것입니다.

문제 및 가능한 해결 방법에 대한 다른 토론은 다음 이전 Stack Overflow 게시물에서 찾을 수 있습니다.

• JavaScript에서 클립 보드에 복사하려면 어떻게합니까?
• jQuery를 사용하여 클라이언트의 클립 보드에 텍스트를 복사하는 방법은 무엇입니까?
• Flash없이 어떻게 클립 보드에 복사 할 수 있습니까?

 

Flash 사용에 대한 최신 대안을 요구하는 다음 질문은 많은 질문에 찬성 투표를 받았지만 솔루션에 대한 답변이 없었습니다 (아마도 존재하지 않기 때문일 것입니다).

• 클립 보드에 데이터를 안전하게 복사하기위한 플래시 기반 ZeroClipboard의 HTML5 대안?
• Flash없이 클립 보드에 복사

 

Internet Explorer와 Firefox는 클립 보드에 액세스하기위한 비표준 API를 사용했지만 더 최신 버전에서는 이러한 방법이 사용되지 않습니다 (아마 보안상의 이유로).

가장 일반적인 클립 보드 문제 (플래시 솔루션에서 요구하는 특정 사용자 작업이 필요할 수 있음)를 해결하기위한 "안전한"방법을 찾기위한 초기 표준 노력이 있으며, 최신 버전에서 부분적으로 구현 될 수 있습니다. Firefox 및 Chrome 버전이지만 아직 확인하지 않았습니다.

출처 : https://stackoverflow.com/questions/22581345/click-button-copy-to-clipboard-using-jquery