html 요소 클릭시 문자열 복사하기

이번에는 특정 요소를 클릭 시에 crtl + C 복사하는 방법을 알아보도록 하겠습니다. 

 

코드부터 살펴보도록 하겠습니다.

html입니다. 

<div onclick="copy('0263964671');return false;" title="클릭시 02-4848-4848 복사">
    <p>02-4848-4848</p>
</div>

 

javascript입니다. 

function copy(text)
{
    window.getSelection().removeAllRanges();
    try
    {
        navigator.clipboard.writeText(text);
    }
    catch {}
    window.getSelection().removeAllRanges();
}

 

 

<div onclick="copy('0263964671');return false;" title="클릭 시 02-4848-4848 복사">

onclick 속성은 클릭 시 실행되는 명령어입니다. 

title 속성은 마우스를 가져다 놓고 기다리다 보면 나오는 문자열입니다.

 

window.getSelection().removeAllRanges();

getSelection()는 window 객체 안의 document 속성에 기반하는 Selection 객체를 반환합니다. 

removeAllRanges()는 Selection 객체 안에 있는 모든 Range를 제거하여, 아무것도 선택되지 않은 상태로 만듭니다. 

 

navigator.clipboard.writeText(text);

navigator 인터페이스는 사용자 에이전트의 상태와 신원 정보를 나타내며, 스크립트로 해당 정보를 질의할 때와 애플리케이션을 특정 활동에 등록할 때 사용합니다.

clipboard는 클립보드 명령(잘라내기, 복사, 붙여 넣기)에 응답하거나 스스템 클립보드에 비동기적으로 접근하고 쓸 수 있는 기능을 제공합니다. 

writeText 인터페이스는 메서드(text)에 지정된 것을 시스템 clipboard에 씁니다. 다만 실패할 경우에 throw를 하게 됩니다. 

 

하시는 프로젝트에 조금이나마 도움이 되었으면 좋겠습니다.