[JS] 클립보드에 특정 텍스트 복사하기

 

코드블럭 오른쪽 상단바에 존재하는 "복사 아이콘"을 클릭해보세요!

"Ctrl + C" 단축키와 같은 기능 또는 블로그에 새로 추가한 "코드 복사" 기능을 웹 상에서 구현하기 위해서는 특정 텍스트를 클립보드에 추가시켜줘야 합니다.

 

코드 

클립보드와 상호작용하는데 가장 많이 사용되는 document.execCommand() 방법을 사용하여 쉽게 구현할 수 있습니다.

 

• document.execCommand("copy") - 클립 보드에 텍스트 복사 기능
• document.execCommand("cut") - 클립 보드에 텍스트 잘라내기 기능
• document.execCommand("paste") - 클립 보드에 이미 존재하는 내용을 붙여넣기 기능

 

해당 기능은 input, textarea와 같은 입력창에 입력된 값 중 선택(드래그)된 상태인 텍스트에 적용되는 기능입니다.

 

const copy = (text) => {
  // 임시의 textarea 생성
  const $textarea = document.createElement("textarea");

  // body 요소에 존재해야 복사가 진행됨
  document.body.appendChild($textarea);
  
  // 복사할 특정 텍스트를 임시의 textarea에 넣어주고 모두 셀렉션 상태
  $textarea.value = text;
  $textarea.select();
  
  // 복사 후 textarea 지우기
  document.execCommand('copy');
  document.body.removeChild($textarea);
}

copy("복사 테스트");

먼저 텍스트를 삽입할 임시의 textarea 요소를 생성해줍니다. 그 후 원하는 텍스트 값을 임시의  textarea에 삽입 해준 뒤에 삽입한 모든 텍스트를 선택(복사를 하기 위해서 드래그) 시켜줍니다.

 

위에서 소개한 document.execCommand("copy") 기능을 이용하여 셀렉션 된 텍스트들을 복사시켜주고 임시의 textarea 요소는 제거해줍니다.

 

 

간단 요약으로 아래와 같이 진행됩니다.

1. 텍스트를 입력할 임시의 입력창(textarea) 생성
2. 입력창에 텍스트를 입력하고 선택(드래그)시켜 복사 준비
3. execCommand("copy")로 텍스트 복사
4. 생성한 임시의 입력창 제거 

 

익스플로러 환경에서 복사

const copy = (text) => {
  window.clipboardData.setData("text", text);
} 

copy("IE 복사 테스트");

익스플로러 환경에서 복사 기능을 구동하기 위해서는 IE 환경에서만 존재하는 window.clipboardData.setData() 메서드를 사용하여야 합니다.