복붙노트

[JQUERY] jQuery를 사용하여 클립 보드에 버튼 복사를 클릭합니다

JQUERY

jQuery를 사용하여 클립 보드에 버튼 복사를 클릭합니다

해결법

  1. 1.2016로 편집

    2016로 편집

    대부분의 브라우저는 기능을 가지고 있기 때문에 2016, 당신은 지금 document.execCommand ( "복사") 것을 선택 오프 작품을 사용하여 클립 보드에 텍스트의 선택을 복사 프로그램 대부분의 브라우저에서 클립 보드에 텍스트를 복사 할 수 있습니다.

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

    다음 코드 예제는 다음과 같습니다

    document.getElementById를 ( "copyButton"). 또는 addEventListener는 ({) (함수를 "클릭" (document.getElementById를 ( "copyTarget")) copyToClipboard; }); 함수 copyToClipboard (ELEM) { 아직 존재하지 않는 경우 //, 숨겨진 텍스트 요소를 만들 VAR과 targetId = "_hiddenCopyText_"; VAR isInput = elem.tagName === "INPUT"|| elem.tagName === "TEXTAREA"; VAR origSelectionStart, origSelectionEnd; 경우 (isInput) { // 바로 선택과 사본을 원본 소스 요소를 사용할 수 있습니다 = ELEM 타겟팅; origSelectionStart = elem.selectionStart; origSelectionEnd = elem.selectionEnd; } 다른 { // 선택 및 복사를위한 임시 폼 요소를 사용해야합니다 타겟 = document.getElementById를 (과 targetId); 만약 (! 대상) { VAR 타겟 document.createElement ( "텍스트 영역") =; target.style.position = "절대"; target.style.left = "-9999px"; target.style.top = "0"; target.id과 targetId =; document.body.appendChild (표적); } target.textContent = elem.textContent; } 내용을 선택 // VAR currentFocus = document.activeElement; target.focus (); target.setSelectionRange (0 target.value.length); // 선택을 복사 var에 성공; {시도 ( "복사") 성공 = document.execCommand; } 캐치 (전자) { = 거짓 성공; } 원래 초점을 복원 // 경우 (currentFocus && 대해서 typeof currentFocus.focus === "기능") { currentFocus.focus (); } 경우 (isInput) { 이전 선택을 복원 // elem.setSelectionRange (origSelectionStart, origSelectionEnd); } 다른 { // 분명 일시적 내용 target.textContent = ""; } 성공 반환; } 입력 { 폭 : 400 픽셀; } <버튼 ID = "copyButton"> 복사

    가상 <입력 유형 = "텍스트"자리 = "클립 보드 내용을 보려면 여기를 클릭하고 Ctrl-V">

    여기에 좀 더 진보 된 데모는 다음과 같습니다 https://jsfiddle.net/jfriend00/v9g1x0o6/

    그리고, 당신은 또한 clipboard.js 당신이 작업을 수행하는 사전 구축 된 라이브러리를 얻을 수 있습니다.

    대답의 이전, 역사적인 부분

    직접 자바 스크립트를 통해 클립 보드에 복사는 보안상의 이유로 현대의 브라우저에 의해 허용되지 않습니다. 가장 일반적인 해결 방법은 직접 사용자가 클릭에 의해 트리거 될 수있는 클립 보드에 복사하기위한 플래시 기능을 사용하는 것입니다.

    이미 언급 한 바와 같이, ZeroClipboard는 복사를 할 수있는 플래시 객체를 관리하기위한 코드의 인기 세트입니다. 나는 그것을 사용했습니다. 플래시 (모바일 또는 태블릿에서 규칙) 브라우징 장치에 설치되어있는 경우, 그것을 작동합니다.

    다음 가장 일반적인 주위 작업은, 입력 필드에 클립 보드 바인딩 텍스트를 해당 필드에 포커스를 이동하고 텍스트를 복사하려면 Ctrl + C에 사용자를 조언하는 것입니다.

    문제 및 가능한 해결 방안 다른 논의는 이러한 이전 스택 오버플로 게시물에서 찾을 수 있습니다 :

    플래시를 사용하는 현대적인 대안을 묻는이 질문은 솔루션 (아마도 때문에 없음 존재)로 질문 upvotes 많은없이 답변을받은 :

    인터넷 익스플로러와 파이어 폭스 클립 보드에 액세스하기위한 표준이 아닌 API를 가지고하는 데 사용하지만, 자신의 현대 버전은 (아마도 보안상의 이유로) 그 방법을 사용 중지했다.

    이 (플래시 솔루션을 필요로 같은 아마 특정 사용자 조치가 필요합니다) 가장 일반적인 클립 보드 문제를 해결하기 위해 "안전한"방법을 마련하려고하는 초기 표준 작업이며, 그것은 부분적으로 최신 구현 될 수있다처럼 보인다 파이어 폭스와 크롬의 버전,하지만 난 아직 확인하지 않았습니다.

  2. 2.(떨어져 jfriend00의 대답에 언급 된 클립 보드 API에서) 다른 비 플래시 방법이있다. 당신은 텍스트를 선택한 다음 해당 페이지에서 현재 선택되어 어떤 텍스트를 클립 보드에 복사 명령 사본을 실행해야합니다.

    (떨어져 jfriend00의 대답에 언급 된 클립 보드 API에서) 다른 비 플래시 방법이있다. 당신은 텍스트를 선택한 다음 해당 페이지에서 현재 선택되어 어떤 텍스트를 클립 보드에 복사 명령 사본을 실행해야합니다.

    예를 들어,이 기능은 (PointZeroTwo에서 의견의 제안으로 업데이트) 클립 보드에 전달 된 요소의 내용을 복사합니다 :

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

    그것이 작동하는 방법이다 :

    요소의 내부 텍스트는 공백을 포함 할 수 있습니다. 그래서 당신은 암호에 대한 예를 들어 당신이 $ (요소)는 .text ()를 사용하여 텍스트를 잘라낼 수 있습니다 경우에 사용하려는 경우. 위의 코드에서 () 트림.

    당신은 빠른 데모를 여기에서 볼 수 있습니다 :

    copyToClipboard 기능 (요소) { VAR을 $ 온도 = $ ( ""); $ ( "몸") APPEND ($ TEMP).; $ temp.val ($ (요소)는 .text ()) (선택).; document.execCommand ( "복사"); ) (temp.remove를 $; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> P1 : 나는 제 1 P2가 : 나는 두 번째 단락 <버튼의 onclick = "copyToClipboard ( '#의 P1')"> 복사 P1 <버튼의 onclick = "copyToClipboard ( '#에 P2')"> 복사 P2

    주요 문제는 모든 브라우저 순간에이 기능을 지원하지만, 당신의 주요 것들에 사용할 수없는 것입니다 :

  3. 3.clipboard.js 플래시를 사용하지 않고 클립 보드에 텍스트 또는 HTML 데이터의 복사를 허용하는 좋은 유틸리티입니다. 그것은 사용하기 매우 쉽습니다; 다만이 같은의 .js 사용 일을 포함한다 :

    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의에 있습니다.

    2016년 1월 15일에 편집 : 상단의 대답은 내 대답에 동일한 API를 참조하기 위해 오늘 편집 된 이전 텍스트 ZeroClipboard를 사용하는 사용자를 지시했다 8월 2015 년 기록했다. 그냥 내가 jfriend00의 대답, 주위 오히려 다른 방법에서이를 잡아 당기지 않았 음을 분명히하고자합니다.

  4. 4.단순함은 궁극의 정교함이다. 당신이 원하지 않으면 볼 수 있도록 텍스트 - 투 - - 복사 : jQuery를 :

    단순함은 궁극의 정교함이다. 당신이 원하지 않으면 볼 수 있도록 텍스트 - 투 - - 복사 : 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;" />

  5. 5.줄 바꿈 (알바 몬토로의 도움말의 확장)와

    줄 바꿈 (알바 몬토로의 도움말의 확장)와

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

  6. 6.플래시 또는 다른 요구 사항없이 더 나은 접근 방식은 clipboard.js입니다. 당신이해야 할 모든 추가 데이터를 클립 보드 대상 = 모든 버튼에 "#의 toCopyElement는"그에게 새로운 클립 보드 ( '. BTN')를 초기화이다; 그것은 클립 보드에 아이디 toCopyElement와 DOM의 내용을 복사합니다. 이 링크를 통해 귀하의 질문에 제공된 텍스트를 복사 코드 조각입니다.

    플래시 또는 다른 요구 사항없이 더 나은 접근 방식은 clipboard.js입니다. 당신이해야 할 모든 추가 데이터를 클립 보드 대상 = 모든 버튼에 "#의 toCopyElement는"그에게 새로운 클립 보드 ( '. BTN')를 초기화이다; 그것은 클립 보드에 아이디 toCopyElement와 DOM의 내용을 복사합니다. 이 링크를 통해 귀하의 질문에 제공된 텍스트를 복사 코드 조각입니다.

    하지만 한 가지 제한은 사파리 작업을하지 않는다는 것입니다,하지만 그것은 플래시를 사용하지 않는 모바일 브라우저를 포함한 다른 모든 브라우저에서 작동

    () {(기능 $ 새로운 클립 보드 ( '복사 텍스트입니다.'); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <스크립트 SRC = "https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"> 로렘 입숨 단순히 인쇄 조판 산업 더미 텍스트이다. 로렘 입숨 이제까지 업계의 표준 더미 텍스트 1500 년대 이후되었습니다 복사 텍스트 에

  7. 7.

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

  8. 8.당신은 클립 보드에 페이지 복사 입력 값이 코드를 사용하여 버튼을 클릭 할 수 있습니다

    당신은 클립 보드에 페이지 복사 입력 값이 코드를 사용하여 버튼을 클릭 할 수 있습니다

    이것은 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");
}

    이것은이 질문에 대한 가장 간단한 솔루션입니다

  9. 9.

    <!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>

  10. 10.의 jQuery 간단한 솔루션입니다.

    의 jQuery 간단한 솔루션입니다.

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

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

  11. 11.없음 :이 입력 필드는 표시를하지 않는 것이 매우 중요합니다. 브라우저는 텍스트를 선택하지 않으며, 따라서 복사되지 않습니다. 사용 불투명도 : 0 문제를 해결하기 위해 0 픽셀의 폭.

    없음 :이 입력 필드는 표시를하지 않는 것이 매우 중요합니다. 브라우저는 텍스트를 선택하지 않으며, 따라서 복사되지 않습니다. 사용 불투명도 : 0 문제를 해결하기 위해 0 픽셀의 폭.

  12. 12.콘텐츠를 복사 할 수있는 간단한 방법입니다

    콘텐츠를 복사 할 수있는 간단한 방법입니다

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

  13. 13.제안 된 답변의 대부분은 별도의 임시 숨겨진 입력 요소 (들)을 만들 수 있습니다. 대부분의 브라우저는 요즘 DIV 내용 편집을 지원하기 때문에, 나는, 숨겨진 요소 (들)을 작성 서식 텍스트를 보존하고 순수 자바 스크립트 또는 jQuery를 라이브러리를 사용하지 않는 솔루션을 제안한다.

    제안 된 답변의 대부분은 별도의 임시 숨겨진 입력 요소 (들)을 만들 수 있습니다. 대부분의 브라우저는 요즘 DIV 내용 편집을 지원하기 때문에, 나는, 숨겨진 요소 (들)을 작성 서식 텍스트를 보존하고 순수 자바 스크립트 또는 jQuery를 라이브러리를 사용하지 않는 솔루션을 제안한다.

    여기에 내가 생각할 수있는 코드의 최소한의 선을 사용하여 최소한의 골격 구현은 다음과 같습니다

    // 순수 자바 스크립트 구현 : document.getElementById를 ( "copyUsingPureJS을").하여 addEventListener은 ((함수를 "클릭") { copyUsingPureJS (document.getElementById를 ( "copyTarget")); 경고 ( "순수 자바 스크립트를 사용하여 클립 보드에 복사 된 텍스트"); }); 함수 copyUsingPureJS (element_id) { element_id.setAttribute ( "의 contentEditable", TRUE); element_id.setAttribute ( "onfocus 및", "document.execCommand ( '는 selectAll'거짓 널)"); element_id.focus (); document.execCommand ( "복사"); element_id.removeAttribute ( "의 contentEditable"); } // jQuery를 : $ (문서) .ready (함수 () { $ ( "#의 copyUsingJquery"). ((클릭 기능) { copyUsingJquery ( "#의 copyTarget"); }); 함수 copyUsingJquery (element_id) { $ (element_id) .attr ( "의 contentEditable", TRUE) .고르다() CSTE 연구진 ( "포커스"함수 () { document.execCommand ( '는 selectAll', 거짓, 널 (null)) }) .초점() document.execCommand ( "복사"); $ (element_id) .removeAttr ( "의 contentEditable"); 경고 ( "클립 보드는 jQuery를 사용하여 복사 텍스트"); } }); #copyTarget { 폭 : 400 픽셀; 높이 : 400 픽셀; 국경 : 1 픽셀의 홈 회색; 색상 : 해군; 텍스트 정렬 : 센터; 상자 그림자 : 0 4 픽셀 8px 0 회색; } #copyTarget H1 { 파란색; } #copyTarget H2 { 색상 : 빨강; } #copyTarget H3 { 색상 : 녹색; } #copyTarget H4 { 색상 : 시안; } #copyTarget H5 { 색상 : 브라운; } #copyTarget H6 { 색상 : 청록색; } #pasteTarget { 폭 : 400 픽셀; 높이 : 400 픽셀; 국경 : 1 픽셀의 삽입 된 연회비; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    제목 1

    제목 2

    표제어 3

    표제어 4

    표제어 5
    표제어 6 을 보존 형식
    <버튼 ID = "copyUsingPureJS"> 순수 자바 스크립트를 사용하여 복사 <버튼 ID = "copyUsingJquery"> jQuery를 사용하여 복사 로
    결과를 ​​보려면 여기를 붙여 넣기

  14. 14.복사 할 텍스트는 텍스트 입력에, 같은 : <버튼 타입 : 버튼을 같이하므로, 클립 보드에 복사 취득해야 텍스트 위의 버튼 클릭에 <입력 유형 = "텍스트"ID = "copyText"이름 = "copyText">와, = "제출"ID = "copy_button"데이터를 클립 보드 대상 = 'copyText'> 복사 스크립트가 같아야합니다 :

    복사 할 텍스트는 텍스트 입력에, 같은 : <버튼 타입 : 버튼을 같이하므로, 클립 보드에 복사 취득해야 텍스트 위의 버튼 클릭에 <입력 유형 = "텍스트"ID = "copyText"이름 = "copyText">와, = "제출"ID = "copy_button"데이터를 클립 보드 대상 = 'copyText'> 복사 스크립트가 같아야합니다 :

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

</script>

    CDN 파일의 경우

    참고 : ZeroClipboard.swf 및 ZeroClipboard.js "파일이 기능을 사용하여 파일과 같은 폴더에 있어야한다, 또는 당신은 우리가 <스크립트 SRC = 포함 같이 포함해야"우리의 페이지에 "> 를.

  15. 15.당신은 쉽게 실현을 위해 복사 목표를이 lib 디렉토리를 사용하실 수 있습니다!

    당신은 쉽게 실현을 위해 복사 목표를이 lib 디렉토리를 사용하실 수 있습니다!

    https://clipboardjs.com/

    또는

    https://github.com/zeroclipboard/zeroclipboard

    http://zeroclipboard.org/

  16. 16.클립 보드 - polyfill 라이브러리는 현대 약속 기반 비동기 클립 보드 API에 대한 polyfill입니다.

    클립 보드 - polyfill 라이브러리는 현대 약속 기반 비동기 클립 보드 API에 대한 polyfill입니다.

    CLI에서 설치 :

    npm install clipboard-polyfill

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

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

    예

    나는 ( "바벨-polyfill") 필요가있는 번들을 사용하고 있습니다; 및 생산을위한 크롬 67 모든 좋은 그것을 테스트했습니다.

  17. 17.여기에 HTML 코드

    여기에 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 CODE :

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

  18. 18.당신은 HTML 요소의 텍스트에서 개별 텍스트를 따로 복사 할 수 있습니다.

    당신은 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();
            }
        };

  19. 19."- 복사 버튼 내용"쌍 클래스 인라인 onclick을하지 않고 순수 JS,. 당신은 많은 요소가있는 경우), 더 편안 할 것

    "- 복사 버튼 내용"쌍 클래스 인라인 onclick을하지 않고 순수 JS,. 당신은 많은 요소가있는 경우), 더 편안 할 것

    (함수(){ / * 한 번만 텍스트 영역을 생성,하지만 때마다 * / 할 영역 = document.createElement ( '텍스트 영역'); document.body.appendChild (영역); area.style.display = "없음"; 하자 내용 = document.querySelectorAll ( 'JS-내용.'); 하자 사본 = document.querySelectorAll ( 'JS-사본.'); 대해 (ⅰ = 0하자 나는 this.innerHTML = "복사", 2000); }); } }) (); 시간 {마진 : 15 픽셀 0; 테두리 : 없음; } <스팬 클래스 = "JS 콘텐츠"> 1111 <버튼 클래스 = "JS-복사"> 복사 <시간> <스팬 클래스 = "JS 콘텐츠"> 2222 <버튼 클래스 = "JS-복사"> 복사 <시간> <스팬 클래스 = "JS 콘텐츠"> 3333 <버튼 클래스 = "JS-복사"> 복사

    이전 브라우저 지원 :

    (함수(){ VAR 면적 = document.createElement ( "텍스트 영역 '); document.body.appendChild (영역); area.style.display = "없음"; VAR 함량 = document.querySelectorAll ( 'JS 콘텐츠. "); VAR 복사 document.querySelectorAll = ( 'JS 복사.'); 경우 (나는 1111 <버튼 클래스 = "JS-복사"> 복사 <시간> <스팬 클래스 = "JS 콘텐츠"> 2222 <버튼 클래스 = "JS-복사"> 복사 <시간> <스팬 클래스 = "JS 콘텐츠"> 3333 <버튼 클래스 = "JS-복사"> 복사

  20. 20.2020, 당신은 클립 보드 API를 사용합니다.

    2020, 당신은 클립 보드 API를 사용합니다.

    navigator.clipboard.writeText('text here you want to copy').then(function () {
    alert('It worked! Do a CTRL - V to paste')
}, function () {
    alert('Failure to copy. Check permissions for clipboard')
});

    여기에 클립 보드와 상호 작용에 대한 자세한 정보는

  21. 21.마법처럼 모두 의지의 작품 :)

    마법처럼 모두 의지의 작품 :)

    JAVASCRIPT :

    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>

    JQUERY : https://paulund.co.uk/jquery-copy-clipboard

    22. from https://stackoverflow.com/questions/22581345/click-button-copy-to-clipboard-using-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 검증 플러그인 - 어떻게 간단한 사용자 지정 규칙을 만드는 방법?  (0) 2020.09.25
[JQUERY] 사용자가 아래로 스크롤 경우 확인  (0) 2020.09.25
[JQUERY] 왜 나는 옵션을 GET 요청 대신 요구는 무엇입니까?  (0) 2020.09.25
[JQUERY] 어떻게 jQuery를 사용하여 알파벳 순으로 목록을 정렬 할 수 있습니다?  (0) 2020.09.24
[JQUERY] 체크 박스가 jQuery를 함께 선택되어 있는지 확인  (0) 2020.09.24
,

티스토리툴바