클립보드 기능에 JavaScript 복사(jQuery 없음)

최근에 내 url shortener 에서 작업하는 동안 클립보드 기능에 JavaScript 복사가 필요했습니다. jQuery가 없습니다. 그냥 바닐라 JavaScript. 저는 가벼우면서 jQuery를 사용하지 않기를 원했습니다.

그래서 아래의 간단한 "클립보드에 복사"기능은 이 문제를 해결하기 위해 생각해낸 것입니다.

아래에 이 JavaScript 복사 기능에 대한 전체 설명도 있습니다. :)

function copy(elem){  
    // get the text to be copied
    if (elem.innerText != undefined)
        text = elem.innerText;
    else if (elem.value != undefined)
        text = elem.value;
    else
    return false;

    // create a temporary box, and stop the viewport scrolling
    var box = document.createElement("textarea");
    box.value = text;
    document.body.appendChild(box);
    box.style.top = "0";
    box.style.left = "0";
    box.style.position = "fixed";

    // select the text in the box and copy it
    box.focus();
    box.select();
    box.setSelectionRange(0, 99999);
    document.execCommand("copy");

    // alert the user of the copy?
    alert("text copied to your clipboard!");
}

클립보드에 복사한 사용자에게 경고하는 메시지 또는 방법을 변경하는 것을 잊지 마십시오. 이 경고 메시지를 원하지 않는 한. 그것도 멋져요 :)

알고 보니 클립보드가 짜증나네요...

이것은 당신을 놀라게 할 수도 있지만 클립보드는 작업하기 정말 귀찮습니다. 실제로 브라우저에서 클립보드에 복사하는 것은 정말 어렵습니다. 몇 가지 이유로:

브라우저마다 다름

브라우저는 실제로 "선택된"텍스트만 복사할 수 있기를 원합니다.

어떤 이유에서인지 브라우저는 클립보드를 쉽게 조작할 수 없게 만들고 싶어하는 것 같습니다. 그러나 이것이 함께 해킹된 코드 스니펫의 목적입니다!

JavaScript에서 클립보드를 사용하는 방법

이 JavaScript 복사 기능을 웹 페이지에 추가하십시오. 원하는 곳에 배치하면 제대로 작동합니다.

JavaScript로 텍스트를 복사하려는 텍스트 또는 요소에서 이 "copy(this)"함수를 호출해야 합니다. 이렇게:

텍스트 상자 또는 텍스트 영역에서 텍스트 복사:

<input type="text" name="text_box" value="copy to clipboard" onClick="copy(this);" />
<textarea cols="50" rows="4">try to copy me</textarea>

텍스트 상자나 텍스트 영역에서 텍스트를 복사하는 것은 매우 쉬운 것으로 판명되었습니다. JavaScript "select"및 "setSelectionRange"기능은 문자 그대로 이를 위해 설계되었습니다! 하지만... 페이지에서 일반 텍스트를 복사하는 것은 어떻습니까? 조금 더 까다롭습니다:

div, span 또는 기타 html 요소에서 텍스트를 복사합니다.

<span class="my_class" onClick="copy(this);">copy this text</span>

페이지에서 비사용자 입력 텍스트를 사용하는 경우 이 복사 기능은 요소의 "inner text "만 복사할 수 있습니다. 따라서 페이지에서 매우 구체적인 텍스트를 복사하려는 경우 일부 "span"태그 안에 텍스트를 래핑하는 것이 좋습니다. 올바른 텍스트를 훨씬 쉽게 얻을 수 있습니다.

이 클립보드 복사 기능의 작동 방식:

이 JavaScript 함수는 매우 간단하지만 자세히 설명하겠습니다.

첫째: param이라는 함수에 전달된 매개변수를 사용하여 복사할 텍스트/값을 가져오려고 시도합니다. "innerText"또는 "값"을 가져오기 위해 빠른 검사를 수행합니다. DOM의 대부분의 요소는 이들 중 하나와 함께 원하는 실제 텍스트만 반환하기 때문에 이 검사를 수행해야 합니다. 예를 들어 입력 및 텍스트 영역은 "value"를 사용하고 span 및 div와 같은 요소는 "innerText"를 사용합니다.

if (elem.innerText != undefined)
    text = elem.innerText;
else if (elem.value != undefined)
    text = elem.value;
else
return false;

다음으로 DOM에 가짜 요소를 만들어 복사하려는 텍스트를 추가합니다. JavaScript에서는 입력 또는 텍스트 영역 내부의 텍스트만 "선택"하고 복사할 수 있기 때문에 이 작업을 수행해야 합니다. 그래서 페이지에 표시하지 않고 가짜를 만들겠습니다.

그런 다음 내가 만든 가짜 텍스트 영역에 몇 가지 기본 및 특정 스타일을 추가합니다. JavaScript로 텍스트를 복사하기 위해 텍스트 영역을 "선택"하자마자 텍스트 영역이 있는 위치("본문"의 맨 아래에 있습니다. 그래서 고정하고 왼쪽 상단에 있도록 합니다. 스크롤이 보이지 않습니다. 승리!

// create a temporary box, and stop the viewport scrolling
var box = document.createElement("textarea");
box.value = text;
document.body.appendChild(box);
box.style.top = "0";
box.style.left = "0";
box.style.position = "fixed";

마지막으로 실제로 가짜 텍스트 영역에 "초점"을 두고 모든 콘텐츠를 "선택"한 다음 실제로 JavaScript로 복사본을 실행합니다. 이는 사실상 텍스트 영역, Ctrl+A 및 Ctrl+C를 클릭하는 것과 같습니다. 기분이?

// select the text in the box and copy it
box.focus();
box.select();
box.setSelectionRange(0, 99999);
document.execCommand("copy");

그래서 우리는 그것을 가지고 있습니다. JavaScript를 클립보드 기능에 복사하는 가장 쉽고 가벼운 방법입니다. jQuery가 없으면 바닐라 자바스크립트만 있습니다. 너무 가볍고 훌륭합니다!


javascript copy to clipboard function에 대한 이 문서는 원래 내 개인 사이트에 게시되었으며 더 유용한 정보를 찾을 수 있습니다dev articles.