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/

그리고 당신은 또한 당신을 위해 이것을 제공하는 내장 라이브러리를 얻을 수 있습니다 clipboard.js .

답의 오래되고 역사적인 부분

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

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

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

이 문제에 대한 다른 토론과 가능한 해결 방법은 다음의 이전 스택 오버플로 게시물에서 확인할 수 있습니다.

• JavaScript로 클립 보드에 복사하는 방법

• jQuery를 사용하여 텍스트를 클라이언트의 클립 보드에 복사하는 방법은 무엇입니까?

• Flash없이 클립 보드에 어떻게 복사 할 수 있습니까?

Flash 사용에 대한 현대적인 대안을 요구하는 다음과 같은 질문은 많은 질문 공증을 받았으며 해결책에 대한 답변이 없었습니다 (아마도 존재하지 않기 때문에).

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

• 플래시없이 클립 보드로 복사

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

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

업데이트 2020 :이 솔루션은을 사용합니다 execCommand. 이 답변을 작성하는 순간 그 기능은 훌륭했지만 이제는 쓸모없는 것으로 간주됩니다 . 여전히 많은 브라우저에서 작동하지만 지원이 중단 될 수 있으므로 사용하지 않는 것이 좋습니다.

플래시가 아닌 다른 방법이 있습니다 ( jfriend00 's answer에 언급 된 Clipboard API 제외 ). 텍스트를 선택한 다음 명령 을 실행하여 현재 페이지에서 선택된 텍스트를 클립 보드에 복사해야합니다.copy

예를 들어,이 함수는 전달 된 요소의 내용을 클립 보드에 복사합니다 ( PointZeroTwo 의 주석에서 제안으로 업데이트 됨 ).

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

이것이 작동하는 방식입니다.

1. 일시적으로 숨겨진 텍스트 필드를 만듭니다.
2. 요소의 내용을 해당 텍스트 필드에 복사합니다.
3. 텍스트 필드의 내용을 선택합니다.
4. 다음과 같이 명령 사본을 실행합니다 document.execCommand("copy").
5. 임시 텍스트 필드를 제거합니다.

여기에서 간단한 데모를 볼 수 있습니다.

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />

주요 문제는 현재 모든 브라우저 가이 기능을 지원 하지는 않지만 다음과 같은 기본 브라우저 에서이 기능을 사용할 수 있다는 것입니다.

• 크롬 43
• 인터넷 익스플로러 10
• Firefox 41
• 사파리 10

업데이트 1 : 순수한 JavaScript 솔루션으로도 달성 할 수 있습니다 (jQuery 없음).

function copyToClipboard(elementId) {

  // Create a "hidden" input
  var aux = document.createElement("input");

  // Assign it the value of the specified element
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // Append it to the body
  document.body.appendChild(aux);

  // Highlight its content
  aux.select();

  // Copy the highlighted text
  document.execCommand("copy");

  // Remove it from the body
  document.body.removeChild(aux);

}

<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />

#없이 ID를 전달합니다.

madzohan이 아래 주석에서보고 한 것처럼 64 비트 버전의 Chrome (일부 파일을 로컬로 실행)에 이상한 문제가 있습니다. 이 문제는 위의 비 jQuery 솔루션으로 해결 된 것으로 보입니다.

Madzohan은 Safari에서 시도했지만 솔루션은 작동했지만 (채팅 및 아래 주석에 지정된) document.execCommand('SelectAll')대신 사용했습니다 .select().

으로 PointZeroTwo이 코멘트에 지적 이 성공 / 실패 결과를 반환 할 수 있도록 코드를 향상시킬 수있다. 이 jsFiddle 에서 데모를 볼 수 있습니다 .

업데이트 : 텍스트 형식 유지

사용자가 스페인어 버전의 StackOverflow에서 지적한 것처럼 요소의 내용을 문자 그대로 복사하려는 경우 위에 나열된 솔루션이 완벽하게 작동하지만 복사 된 텍스트를 형식으로 붙여 넣으면 그다지 효과적이지 않습니다. 로 복사되고 input type="text"형식은 "손실"입니다.

이를위한 해결책은 편집 가능한 컨텐츠에 div복사 한 다음 execCommand유사한 방식으로 이를 사용하여 복사하는 것입니다. 예를 들면 다음과 같습니다. 복사 버튼을 클릭 한 후 아래 내용 편집 가능 상자에 붙여 넣습니다.

function copy(element_id){
  var aux = document.createElement("div");
  aux.setAttribute("contentEditable", true);
  aux.innerHTML = document.getElementById(element_id).innerHTML;
  aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); 
  document.body.appendChild(aux);
  aux.focus();
  document.execCommand("copy");
  document.body.removeChild(aux);
}

#target {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}

<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('demo')">Copy Keeping Format</button> 

<div id="target" contentEditable="true"></div>

그리고 jQuery에서는 다음과 같습니다.

function copy(selector){
  var $temp = $("<div>");
  $("body").append($temp);
  $temp.attr("contenteditable", true)
       .html($(selector).html()).select()
       .on("focus", function() { document.execCommand('selectAll',false,null); })
       .focus();
  document.execCommand("copy");
  $temp.remove();
}

#target {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}

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

<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('#demo')">Copy Keeping Format</button> 

<div id="target" contentEditable="true"></div>

clipboard.js 는 Flash를 사용하지 않고 텍스트 또는 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에 있습니다 .

2016 년 1 월 15 일 편집 : 2015 년 8 월에 게시 된 답변에서 동일한 API를 참조하도록 오늘 최고의 답변 을 편집 했습니다. 이전 텍스트는 사용자에게 ZeroClipboard를 사용하도록 지시했습니다. jfriend00의 답변에서 다른 방법으로 이것을 빼지 않았 음을 분명히하고 싶습니다.

단순함은 궁극의 정교함이다.
복사 할 텍스트를 표시하지 않으려는 경우 :

jQuery :

$('button.copyButton').click(function(){
    $(this).siblings('input.linkToCopy').select();      
    document.execCommand("copy");
});

HTML :

<button class="copyButton">click here to copy</button>
<input class="linkToCopy" value="TEXT TO COPY"
style="position: absolute; z-index: -999; opacity: 0;" />

줄 바꿈 사용 (Alvaro Montoro의 답변 연장)

var ClipboardHelper = {

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

버튼을 클릭하면 클립 보드의 페이지에서이 코드를 복사 입력 값에 사용할 수 있습니다

이것은 HTML입니다

<input type="text" value="xxx" id="link" class="span12" />
<button type="button" class="btn btn-info btn-sm" onclick="copyToClipboard('#link')">
    Copy Input Value
</button>

그런 다음이 html에 대해이 JQuery 코드를 사용해야합니다

function copyToClipboard(element) {
    $(element).select();
    document.execCommand("copy");
}

이것은이 질문에 대한 가장 간단한 해결책입니다

플래시 또는 다른 요구 사항이없는 더 나은 접근 방식은 clipboard.js 입니다. data-clipboard-target="#toCopyElement"버튼에 추가 하고 초기화하면 new Clipboard('.btn');ID toCopyElement가있는 DOM의 내용 을 클립 보드에 복사합니다. 질문에 제공된 텍스트를 링크를 통해 복사하는 스 니펫입니다.

그러나 한 가지 제한 사항은 Safari에서 작동하지 않지만 플래시를 사용하지 않으므로 모바일 브라우저를 포함한 다른 모든 브라우저에서 작동한다는 것입니다

$(function(){
  new Clipboard('.copy-text');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

<p id="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" data-clipboard-target="#content" href="#">copy Text</a>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="css/index.css" rel="stylesheet" />
    <script src="js/jquery-2.1.4.min.js"></script>
    <script>
        function copy()
        {
            try
            {
                $('#txt').select();
                document.execCommand('copy');
            }
            catch(e)
            {
                alert(e);
            }
        }
    </script>
</head>
<body>
    <h4 align="center">Copy your code</h4>
    <textarea id="txt" style="width:100%;height:300px;"></textarea>
    <br /><br /><br />
    <div align="center"><span class="btn-md" onclick="copy();">copy</span></div>
</body>
</html>

<div class="form-group">
    <label class="font-normal MyText">MyText to copy</label>&nbsp;
    <button type="button" class="btn btn-default btn-xs btnCopy" data="MyText">Copy</button>
</div>


$(".btnCopy").click(function () {
        var element = $(this).attr("data");
        copyToClipboard($('.' + element));
  });

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

입력 필드에가 없어야합니다 display: none. 브라우저는 텍스트를 선택하지 않으므로 복사되지 않습니다. 사용 opacity: 0문제를 해결하기 위해 0 픽셀의 폭.

내용을 복사하는 가장 간단한 방법입니다

 <div id="content"> Lorepm ispum </div>
 <button class="copy" title="content">Copy Sorce</button>

function SelectContent(element) {
                        var doc = document
                            , text = doc.getElementById(element)
                            , range, selection
                        ;    
                        if (doc.body.createTextRange) {
                            range = document.body.createTextRange();
                            range.moveToElementText(text);
                            range.select();
                        } else if (window.getSelection) {
                            selection = window.getSelection();        
                            range = document.createRange();
                            range.selectNodeContents(text);
                            selection.removeAllRanges();
                            selection.addRange(range);

                        }
                         document.execCommand('Copy');
                    }
                    $(".copy").click(function(){

                         SelectContent( $(this).attr('title'));
                    });

jQuery 간단한 솔루션.

사용자의 클릭에 의해 트리거되어야합니다.

$("<textarea/>").appendTo("body").val(text).select().each(function () {
            document.execCommand('copy');
        }).remove();

이 lib를 사용하여 복사 목표를 쉽게 실현할 수 있습니다!

https://clipboardjs.com/

클립 보드에 텍스트를 복사하는 것은 어렵지 않습니다. 구성하는 데 수십 단계 나로드 할 수백 KB가 필요하지 않습니다. 그러나 무엇보다도 플래시 또는 부풀린 프레임 워크에 의존해서는 안됩니다.

그래서 clipboard.js가 존재합니다.

또는

https://github.com/zeroclipboard/zeroclipboard

http://zeroclipboard.org/

ZeroClipboard 라이브러리는 보이지 않는 Adobe Flash 무비와 JavaScript 인터페이스를 사용하여 텍스트를 클립 보드에 쉽게 복사 할 수있는 방법을 제공합니다.

복사 할 텍스트는 다음 <input type="text" id="copyText" name="copyText"> 과 같은 텍스트 입력 에 있습니다. 버튼을 클릭하면 텍스트가 클립 보드에 복사되므로 버튼은 다음과 같습니다. <button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button> 스크립트는 다음과 같아야합니다.

<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
  moviePath: "ZeroClipboard.swf"
}); 
});

</script>

CDN 파일

• (zeroclipboard.swf) :
• (zeroclipboard.js) :

참고 : ZeroClipboard.swf및 ZeroClipboard.js"파일은이 기능을 사용하는 파일과 동일한 폴더에 있어야합니다. 또는 <script src=""></script>페이지에 포함 된 것처럼 포함 해야합니다.

제안 된 답변의 대부분은 여분의 임시 숨겨진 입력 요소를 만듭니다. 오늘날 대부분의 브라우저는 div 컨텐츠 편집을 지원하므로 숨겨진 요소를 작성하지 않고 텍스트 형식을 유지하고 순수한 JavaScript 또는 jQuery 라이브러리를 사용하는 솔루션을 제안합니다.

내가 생각할 수있는 가장 적은 코드 줄을 사용하는 미니멀리스트 골격 구현은 다음과 같습니다.

//Pure javascript implementation:
document.getElementById("copyUsingPureJS").addEventListener("click", function() {
  copyUsingPureJS(document.getElementById("copyTarget"));
  alert("Text Copied to Clipboard Using Pure Javascript");
});

function copyUsingPureJS(element_id) {
  element_id.setAttribute("contentEditable", true);
  element_id.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
  element_id.focus();
  document.execCommand("copy");
  element_id.removeAttribute("contentEditable");
  
}

//Jquery:
$(document).ready(function() {
  $("#copyUsingJquery").click(function() {
    copyUsingJquery("#copyTarget");
  });
 

  function copyUsingJquery(element_id) {
    $(element_id).attr("contenteditable", true)
      .select()
      .on("focus", function() {
        document.execCommand('selectAll', false, null)
      })
      .focus()
    document.execCommand("Copy");
    $(element_id).removeAttr("contenteditable");
     alert("Text Copied to Clipboard Using jQuery");
  }
});

#copyTarget {
  width: 400px;
  height: 400px;
  border: 1px groove gray;
  color: navy;
  text-align: center;
  box-shadow: 0 4px 8px 0 gray;
}

#copyTarget h1 {
  color: blue;
}

#copyTarget h2 {
  color: red;
}

#copyTarget h3 {
  color: green;
}

#copyTarget h4 {
  color: cyan;
}

#copyTarget h5 {
  color: brown;
}

#copyTarget h6 {
  color: teal;
}

#pasteTarget {
  width: 400px;
  height: 400px;
  border: 1px inset skyblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="copyTarget">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <strong>Preserve <em>formatting</em></strong>
  <br/>
</div>

<button id="copyUsingPureJS">Copy Using Pure JavaScript</button>
<button id="copyUsingJquery">Copy Using jQuery</button>
<br><br> Paste Here to See Result
<div id="pasteTarget" contenteditable="true"></div>

클립 보드 폴리 필 라이브러리는 최신 Promise 기반 비동기 클립 보드 API를위한 폴리 필입니다.

CLI에 설치하십시오.

npm install clipboard-polyfill 

JS 파일에서 클립 보드로 가져 오기

window.clipboard = require('clipboard-polyfill');

예

require("babel-polyfill");크롬 67과 함께 번들로 사용 하고 테스트했습니다. 모두 프로덕션에 적합합니다.

여기 HTML 코드

    <input id="result" style="width:300px"/>some example text
    <button onclick="copyToClipboard('result')">Copy P1</button>
    <input type="text" style="width:400px" placeholder="Paste here for test" />

JS 코드 :

     function copyToClipboard(elementId) {

                      // Create a "hidden" input
                      var aux = document.createElement("input");

                      aux.setAttribute("value", document.getElementById(elementId).value);
                      // Append it to the body
                      document.body.appendChild(aux);
                      // Highlight its content
                      aux.select();
                      // Copy the highlighted text
                      document.execCommand("copy");
                      // Remove it from the body
                      document.body.removeChild(aux);
                    }

HTML 요소의 텍스트와 별도로 개별 텍스트를 복사 할 수 있습니다.

        var copyToClipboard = function (text) {
            var $txt = $('<textarea />');

            $txt.val(text)
                .css({ width: "1px", height: "1px" })
                .appendTo('body');

            $txt.select();

            if (document.execCommand('copy')) {
                $txt.remove();
            }
        };

인 클래스 온 클릭이없는 순수 JS (페어링 된 클래스 "content-copy button"). 많은 요소가 있다면 더 편할 것입니다)

(function(){

/* Creating textarea only once, but not each time */
let area = document.createElement('textarea');
document.body.appendChild( area );
area.style.display = "none";

let content = document.querySelectorAll('.js-content');
let copy    = document.querySelectorAll('.js-copy');

for( let i = 0; i < copy.length; i++ ){
  copy[i].addEventListener('click', function(){
    area.style.display = "block";
    /* because the classes are paired, we can use the [i] index from the clicked button,
    to get the required text block */
    area.value = content[i].innerText;
    area.select();
    document.execCommand('copy');   
    area.style.display = "none";

    /* decorative part */
    this.innerHTML = 'Cop<span style="color: red;">ied</span>';
    /* arrow function doesn't modify 'this', here it's still the clicked button */
    setTimeout( () => this.innerHTML = "Copy", 2000 );
  });
}

})();

hr { margin: 15px 0; border: none; }

<span class="js-content">1111</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">2222</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">3333</span>
<button class="js-copy">Copy</button>

이전 브라우저 지원 :

(function(){

var area = document.createElement('textarea');
document.body.appendChild( area );
area.style.display = "none";

var content = document.querySelectorAll('.js-content');
var copy    = document.querySelectorAll('.js-copy');

for( var i = 0; i < copy.length; i++ ){
  copyOnClick(i);
}

function copyOnClick(i){
  copy[i].addEventListener('click', function(){
    area.style.display = "block";
    area.value = content[i].innerText;
    area.select();
    document.execCommand('copy');   
    area.style.display = "none";
    
    var t = this;
    t.innerHTML = 'Cop<span style="color: red;">ied</span>';
    setTimeout( function(){
      t.innerHTML = "Copy"
    }, 2000 );
  });
}

})();

hr { margin: 15px 0; border: none; }

<span class="js-content">1111</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">2222</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">3333</span>
<button class="js-copy">Copy</button>

둘 다 매력처럼 작동합니다 :),

자바 스크립트 :

function CopyToClipboard(containerid) {
if (document.selection) { 
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select().createTextRange();
    document.execCommand("copy"); 

} else if (window.getSelection) {
    var range = document.createRange();
     range.selectNode(document.getElementById(containerid));
     window.getSelection().addRange(range);
     document.execCommand("copy");
     alert("text copied") 
}}

html에서도

<button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button>

<div id="div1" >Text To Copy </div>

<textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>

쿼리 : https://paulund.co.uk/jquery-copy-clipboard