[JavaScript] 자바스크립트 클릭시 복사 및 input value 값 복사하는법

2021-12-07

---

Photo by Dimitry Anikin on Unsplash

View에 존재하는 기존의 데이터를 복사해서 사용자에게 전달해야 하는 경우가 있다. 이러한 기능을 손쉽게 처리하는 방법을 알아보자.

---

- 예제

 

사용할 자바스크립트 코드는 document.execCommand("copy");라는 명령어이다. 이는 view에서 현재 select()된 text를 클립보드에 복사해주는 기능을 수행한다. 아래의 예제 자바스크립트 함수 코드를 보자.

 

	//클릭했을 경우 클립보드에 복사된다.
 	function clickCopy(value){
		var tempInput = document.createElement("input");
		tempInput.style = "position: absolute; left: -1000px; top: -1000px";
		//input 창 생성 후 위치 선정
       		tempInput.value = value;
       		//매개값으로 받은 정보 input 에 삽입
	    	document.body.appendChild(tempInput);
	    	//body태그에 인풋태그 삽입
        	tempInput.select();
        	//해당 인풋테크 select -> value 값이 선택된다.
	    	document.execCommand("copy");
        	//해당 값을 복사를 시도
	    	document.body.removeChild(tempInput);
	 	//정상적으로 복사되면 해당 인풋태그를 다시 삭제한다.
     }

 

주석에서 이미 설명했지만, 위의 예제코드는 value라는 매개 데이터틀 받아 해당 텍스트를 input 창에 삽입 후 복사하는 코드이다. 위의 코드를 적절히 사용하면 각종 데이터를 복사하여 사용할 수 있다.

---

메인 이미지 출처 : Photo by Dimitry Anikin on Unsplash