복붙노트

[JQUERY] 클립 보드 사업부에서 텍스트를 복사하는 방법

JQUERY

클립 보드 사업부에서 텍스트를 복사하는 방법

해결법

  1. 1.두 예제는 마법처럼 작동합니다 :)

    두 예제는 마법처럼 작동합니다 :)

  2. 2.나는 위의 제안 솔루션을 시도했다. 그러나 크로스 브라우저 충분하지 않았다. 정말 작업에 IE11 필요합니다. 시도 후 나는에있어 :

    나는 위의 제안 솔루션을 시도했다. 그러나 크로스 브라우저 충분하지 않았다. 정말 작업에 IE11 필요합니다. 시도 후 나는에있어 :

        <html>
        <body>
            <div id="a" onclick="copyDivToClipboard()"> Click to copy </div>
            <script>
                function copyDivToClipboard() {
                    var range = document.createRange();
                    range.selectNode(document.getElementById("a"));
                    window.getSelection().removeAllRanges(); // clear current selection
                    window.getSelection().addRange(range); // to select text
                    document.execCommand("copy");
                    window.getSelection().removeAllRanges();// to deselect
                }
            </script>
        </body>
    </html>

    파이어 (64), 크롬 (71), 오페라 57 IE11 (11.472.17134.0) 테스트, 에지 (EdgeHTML 17.17134)

    업데이트 2019년 3월 27일.

    어떤 이유로 document.createRange를 들어 () IE11과 전에 작동하지 않았다. 하지만 지금 제대로 Range 개체를 반환합니다. 그래서 오히려 document.getSelection 이상 (). getRangeAt (0), 그것을 사용하는 것이 좋습니다.

  3. 3.허용 대답은 복사 할 여러 항목이있는 경우 작동하지 않습니다, 별도의 각 버튼 "클립 보드에 복사합니다." 하나 개의 버튼을 클릭 한 후, 다른 사람이 작동하지 않습니다.

    허용 대답은 복사 할 여러 항목이있는 경우 작동하지 않습니다, 별도의 각 버튼 "클립 보드에 복사합니다." 하나 개의 버튼을 클릭 한 후, 다른 사람이 작동하지 않습니다.

    그 일을하기 위해, 나는 새로운 일을하기 전에 일반 텍스트 선택에 대한 허용 대답의 기능에 약간의 코드를 추가 :

    function CopyToClipboard(containerid) {
    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();
    }

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

  4. 4.이 솔루션은 클립 보드에 복사 한 후 텍스트의 선택 해제를 추가합니다 :

    이 솔루션은 클립 보드에 복사 한 후 텍스트의 선택 해제를 추가합니다 :

    function copyDivToClipboard(elem) {
    var range = document.createRange();
    range.selectNode(document.getElementById(elem));
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
    document.execCommand("copy");
    window.getSelection().removeAllRanges();
}

  5. 5.내가 얻고 있었다으로 selectNode () PARAM 1 타입의 노드 오류가 아닙니다.

    내가 얻고 있었다으로 selectNode () PARAM 1 타입의 노드 오류가 아닙니다.

    이과의 작업에 코드를 변경했습니다. (크롬)

    함수 copy_data (containerid) { VAR 범위를 document.createRange () =; range.selectNode (containerid); // 여기 변경 window.getSelection () removeAllRanges ().; . window.getSelection () addRange (범위); document.execCommand ( "복사"); window.getSelection () removeAllRanges ().; 경고 ( "데이터 복사"); }

    이것은 클립 보드에 복사됩니다! <버튼형 = "버튼"의 onclick = "copy_data (select_txt는)"> 복사 로
    <시간>

    복사 한 후 그것을 여기에 붙여보십시오 <텍스트 영역>

  6. 6.답변으로 링크를 추가하면 첫 번째 대답은 아래 아론 Lavers '의견에 더 많은 관심을 그립니다.

    답변으로 링크를 추가하면 첫 번째 대답은 아래 아론 Lavers '의견에 더 많은 관심을 그립니다.

    http://clipboardjs.com -이 마법처럼 작동합니다. 그냥 clipboard.js 또는 분 파일을 추가합니다. 시작하는 동안, HTML 구성 요소가 클래스를 클릭하고 바로 클릭 요소로 복사 할 내용에 구성 요소의 ID를 전달하는 사용합니다.

  7. 7.솔루션에 수정을 제작, 그래서 대신에 특정 ID의 클래스를 기반으로 여러 div의 작동합니다. 예를 들어, 코드의 여러 블록이있는 경우. 이 사업부 클래스가 "코드"로 설정되어 있다고 가정합니다.

    솔루션에 수정을 제작, 그래서 대신에 특정 ID의 클래스를 기반으로 여러 div의 작동합니다. 예를 들어, 코드의 여러 블록이있는 경우. 이 사업부 클래스가 "코드"로 설정되어 있다고 가정합니다.

    <script>
        $( document ).ready(function() {
            $(".code").click(function(event){
                var range = document.createRange();
                range.selectNode(this);
                window.getSelection().removeAllRanges(); // clear current selection
                window.getSelection().addRange(range); // to select text
                document.execCommand("copy");
                window.getSelection().removeAllRanges();// to deselect
            });
        });
    </script>

  8. 8.이 모든 것들의 비는 날 위해 일했습니다. 하지만 난 anaswer이 나를 위해 일한 질문의 중복을 발견했다.

    이 모든 것들의 비는 날 위해 일했습니다. 하지만 난 anaswer이 나를 위해 일한 질문의 중복을 발견했다.

    여기 링크가 있습니다

    어떻게 자바 스크립트에서 클립 보드에 복사합니까?

  9. 9.a 요소를 작성하는 문서에 추가 할 수 있습니다. 우리가 클립 보드에 복사 할 것을 문자열로 값을 설정합니다. 추가] 현재 HTML 문서에 요소를했다. 사용 HTMLInputElement.select () 요소의 내용을 선택합니다. 사용 Document.execCommand ( '복사') 클립 보드의 내용을 복사합니다. 문서에서 요소를 제거

    a 요소를 작성하는 문서에 추가 할 수 있습니다. 우리가 클립 보드에 복사 할 것을 문자열로 값을 설정합니다. 추가] 현재 HTML 문서에 요소를했다. 사용 HTMLInputElement.select () 요소의 내용을 선택합니다. 사용 Document.execCommand ( '복사') 클립 보드의 내용을 복사합니다. 문서에서 요소를 제거

    function copyToClipboard(containertext) {
    var el = document.createElement('textarea');
    el.value = containertext;
    el.text = containertext;
    el.setAttribute('id', 'copyText');
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    var coptTextArea = document.getElementById('copyText');
    $('#copyText').text(containertext);
    coptTextArea.select();
    document.execCommand('copy');
    document.body.removeChild(el);
    /* Alert the copied text */
    alert("Copied : "+containertext, 1000);
}

    10. from https://stackoverflow.com/questions/36639681/how-to-copy-text-from-a-div-to-clipboard by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 드래그 앤 드롭 라이브 이벤트를 사용하여  (0) 2020.10.27
[JQUERY] 자바 스크립트 / jQuery를에 구문 분석 CSS  (0) 2020.10.27
[JQUERY] 어떻게 JS에서 (멀리 이동) 하역에서 페이지를 중지합니까?  (0) 2020.10.27
[JQUERY] 방법의 contentEditable 요소에 HTML로 선택한 텍스트를 바꾸려면? [복제]  (0) 2020.10.27
[JQUERY] 어떻게이 개 된 div의 스크롤 위치를 동기화하는 방법은 무엇입니까?  (0) 2020.10.27
,

티스토리툴바