리스트 형식의 내용 복사하기

구현하고자 하는 복사 형식은 동일한 구조가 여러개 있는 리스트 형식에서 각각의 내용을 복사해야 하는 것이다.

<div>
  <p>복사할 내용 1</p>
  <span class="copyBtn">복사하기</span>  // button 혹은 아이콘 등
</div>
<div>
  <p>복사할 내용 1</p>
  <span class="copyBtn">복사하기</span>  // button 혹은 아이콘 등
</div>

 

1. document.execCommand 

document.execCommand()함수는 웹 표준에서 deprecated (추천하지 않음) 되어 편집기에서 사용할 경우 취소선으로 작성되지만 현재(22년 11월)까지 작동은 된다.

$('.copyBtn').on('click', function(){
  const copyText = $(this).silblings().text();  // 복사가 될 요소의 내용 가져오기
  const textArea = document.createElemen('textArea');  // 복사가 될 요소가 input, textArea가 아니므로 가상의 textArea 생성
  
  textArea.value = text;  // 가상의 textArea에 복사할 내용 넣기
  document.body.appendChild(textArea);  // textArea 추가
  
  textArea.select();  // textArea 선택
  content.setSelectionRange(0, 99999);  // 모바일에서 동작되기 위한 코드
  document.execCommand('Copy');  // 선택한 textArea값 복사
  content.setSelectionRange(0, 0);  // 모바일에서 동작되기 위한 코드
  textArea.remove();  // textArea 삭제
  
  alert('복사');
});

execCommand('copy') : 텍스트 복사

execCommand('cut') : 텍스트 잘라내기

execCommand('paste') : 텍스트 붙여넣기

 

위에서는 input, textArea의 내용을 복사하지는 않았지만 만약 앞의 텍스트박스를 복사해야 할 경우엔 다음과 같은 조건이 있어야 한다.

HTMLInputElemet.select()는 input, textArea의 모든 텍스트를 선택하는 함수이다. 복사할 텍스트는 반드시 선택이 가능한 입력 필드(input, textarea)여야 하며, 값이 숨겨진 상태(type='hidden')이 아니여야 함.

 

1. clipboard API

execCommand를 대신하기 위해 나옴

$('.copy').on('click',function(){
   const copyText = $(this).siblings().text();
   window.navigator.clipboard.writeText(copyText)
   .then(() => { console.log('복사 성공') })
   .catch(err => { console.log('복사 실패'), err })
});

navigater.clipboard.writeText() : 복사

navigater.clipboard.readText() : 붙여넣기

 

단, clipboard API는 safari 13.1 버전부터 https 환경과 local에서만 지원됨.

 

참고 사이트

https://wildeveloperetrain.tistory.com/151

JavaScript 클립보드 복사하는 방법(Clipboard API, clipboard.js)

https://curryyou.tistory.com/357

[자바스크립트] 텍스트 클립보드 복사(copy)/붙여넣기 기능 구현 방법

https://tttap.tistory.com/126

 

[ 리액트 ] React 문자열 클립보드 복사하기

https://curryyou.tistory.com/358

[자바스크립트] div, p, a, span 텍스트 복사(copy)기능 구현 방법