자바스크립트 문자열 복사 하기 javascript clipboard

웹페이지에서 특정 대상을 복사하기 하는 일이 있다. 업무적인 프로그램에 자주 사용되며 일반적인 복사하기가 아닌 데이터의 가공을 거쳐 엑셀과 같은 보고서에 붙여넣기 하기 위함이다. 보통은 문서의 형태에 맞게 출력을 하는 기능도 있지만 소소한 귀찮은 작업을 해소하기 위해 작은 기능으로 추가되는 경우들이 대부분이다.

자바스크립트 문자열 복사 하기
javascript clipboard

웹프로그래밍에서 알게 모르게 많이 사용하는 것이 복사기능이다.

복사는 클립보드( ClipBoard ) 라 하고 문자열이나 웹브라우저에서 사용자가 선택한 객체를 메모리에 복사하는 역할을 한다.

쉽게 말해 Ctrl+C 복사하기 기능이다.

자바스크립트( Javascript )의 document 객체를 사용하여 복사하기 기능을 만들 수 있는데 웹으로 업무를 하는 프로그램에 자주 사용된다.

마우스로 선택후 복사하기 붙여넣기 할 수도 있지만 업무용 프로그램의 복사하기의 경우 데이터의 형태가 한번은 가공되어 진다.

복사하기 - document 객체 사용

html 의 웹문서의 내용을 복사할 때 사용하는 것은 자바스크립트의 document 객체이다.

document 객체는 html 태그를 조작할 수 있는 객체로 웹브라우저의 기능을 사용할 수 있는 window 객체와 비교된다.

복사하기 구현을 위해 document 객체의 execCommand 메서드를 사용한다.

현재 2022년 11월 25일 기준 execCommand 메서드의 사용을 권장하고 있지 않지만 기능은 여전히 동작하고 있다.

복사하기의 document 객체의 execCommand 메서드의 사용은 다음고 같다.

/**
 * 현재 선택 항목을 클립보드에 복사합니다.
 * 해당 메서드의 실행여부는 브라우저마다 다를 수 있다.
 */
document.execCommand("copy");

복사하기 함수 만들기

아래의 코드는 이미 stackoverflow 에서도 유명한 코드이다.

html 요소를 파마티터로 보내어 값을 추린 후 복사하기를 진행하고 있다.

단점이 보인다.

html 요소를 파라미터로 사용하는 어쩔 수 없지만 함수 내부에 input 태그를 만들어 body 태그에 붙이는 작업을 하는 것이다.

추출한 텍스트를 select 메서드를 통해 선택이란 작업을 한 후 복사하기를 수행한 것이다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    var fnCopyElement = function(element){
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($(element).val()).select();
        document.execCommand("copy");
        $temp.remove();
    }
</script>

전체코드와 결과

위의 복사하기 코드에 대한 전체코드는 다음과 같다.

웹페이에 단순히 스크립트 코드만 붙여넣이 테스트했을 뿐이다.

<!-- html5 웹문서 명시 -->
<!DOCTYPE html>
<html lang="ko">
	<head>
		<!-- 반응형 meta 명시 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
		<input type="text" id="txtInp">
		<input type="button" value="복사하기" onclick="fnCopyElement('#txtInp');">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
		<script>
			var fnCopyElement = function(element){
				var $temp = $("<input>");
				$("body").append($temp);
				$temp.val($(element).val()).select();
				document.execCommand("copy");
				$temp.remove();
			}
		</script>
	</body>
	<script>
		$(document).ready( function() { /* Load Comp. without resources */ });
		$(window).on('load', function() { /* Load Comp. with resources */ });
	</script>
</html>

결과화면을 보자 복사하기 버튼을 통해 문자열을 복사하기를 진행했다.

메모장에 붙여넣기를 하여 테스트를 진행하였다.

저작자표시 비영리 변경금지

'programming > TroubleShootInG' 카테고리의 다른 글

TOAST UI / 토스트 ui 에디터 붙이기 네이버 CDN 사용 (0)	2022.11.27
네이버 토스트 UI 종류 홈페이지 제작 웹개발에 필요한 오픈 소스 프로젝트 (0)	2022.11.27
window.load document.ready 차이와 사용 객체 (0)	2022.11.24
html5 css3 홈페이지 메인 콘텐츠 목록 만들기 (0)	2022.11.23
html5 css3 홈페이지 메인 콘텐츠 영역 만들기 콘텐츠는 왕이다 contents is king (0)	2022.11.23

자바스크립트 문자열 복사 하기 javascript clipboard