CODE:H

JavaScript - 텍스트 복사 (ctrl + C)

 
  • Dec 10, 2020

텍스트 복사

Html 에서 원하는 부분의 텍스트를 (드래그 + ctrl + C)를 직접 하지 않고 복사해보자.
텍스트 복사 버튼을 클릭하면 복사(ctrl + C)가 돼서 다른 곳에 붙여넣기(ctrl + V)를 할 수 있다.

Html

<div> <span class="copyText">이 내용을 복사할거예요! </span>
<div> <span class="copyTextBr">여기는 줄바꿈한 다음에 보이는 곳</span></div>

<button class="btnCopy">텍스트 복사</button></div>

복사할 두개의 div > span 을 생성해보자.

이 내용을 복사할거예요!
여기는 줄바꿈한 다음에 보이는 곳

버튼을 클릭 후 붙여넣기를 하면 위에 내용처럼 줄바꿈 포함 붙여넣게 할 것이다.

JavaScript

  $(".btnCopy").on("click", function(){
	 let val = $(".copyText").text() + "\r\n" + $(".copyTextBr").text(); // 복사할 내용

	 let t = document.createElement("textarea");
	 var agent = navigator.userAgent.toLowerCase();

	if(agent.indexOf("msie") != -1 || agent.indexOf('trident') != -1){   // IE일 때

	   document.body.appendChild(t);
	   t.value = val;

	   window.getSelection().selectAllChildren(t);

	}else{   // chrome일 때

	   t.textContent   = val;
	   document.body.appendChild(t);

	   t.select();

	}

	 document.execCommand("copy");
	 document.body.removeChild(t);
  });
  • let val = $(“.copyText”).text() + “\r\n” + $(“.copyTextBr”).text(); : 복사할 내용이다 ( \r\n은 줄바꿈을 하기 위해 넣은 것이다.)
  • let t = document.createElement(“textarea”); : 복사할 내용을 넣은 textarea를 생성한다.
  • var agent = navigator.userAgent.toLowerCase(); : 현재 사용하는 브러우저를 나타낸다.
  • document.body.appendChild(t); : document의 body부분에 만든 textarea를 append한다.

:heavy_check_mark: IE인 경우

  • t.value = val; : textarea의 value 에 복사할 내용을 넣어준다.
  • window.getSelection().selectAllChildren(t); : textarea의 내용을 드래그해준다.

:heavy_check_mark: chrome인 경우

  • t.textContent = val; : textarea의 value 에 복사할 내용을 넣어준다.
    ( 주의) innerText는 줄 바꿈과 같은 특정 문자를 제거하기 때문에 줄바꿈을 하기 위해서는 사용해선 안된다. textContent를 사용하자 )
  • t.select(); : textarea의 내용을 드래그해준다.

  • document.execCommand(“copy”); : ctrl + C 기능을 해준다.
  • document.body.removeChild(t); : 생성했던 textarea를 지운다.

결과

위에 코드를 돌려보면 ctrl + C 기능이 잘 되어서 메모장이나 다른곳에 ctrl + V 하면

이 내용을 복사할 거예요!
여기는 줄바꿈한 다음에 보이는 곳

이 내용이 잘 복사되어 붙여지는 것을 볼 수 있다!




Search