특별한 일상

[HTML][JavaScript] HTML DOM execCommand() 메서드(ft. 클립보드 복사하기 Clipboard API) 본문

IT•개발 끄적/HTML

[HTML][JavaScript] HTML DOM execCommand() 메서드(ft. 클립보드 복사하기 Clipboard API)

소다맛사탕 2022. 2. 14. 22:29
반응형

안녕하세요. 소다맛사탕 입니다.

오늘은 특정 문자를 클립보드로 복사하는 코드를 구현해 보기에 앞서

HTML5 부터 지원되던 HTML DOM document에 속한 execCommand() 메서드에 대해 알아 보겠습니다.

 

document.execCommand()

HTML 문서가 designMode로 전환되면서 문서에서 execCommand 메서드를 사용할 수 있게 되는데 이것을 이용해서 문서의 편집 가능한 영역을 변경할 수 있다.

document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
명령어가 지원되지 않거나 활성화되어 있지 않으면 false 반환.



execCommand() 메서드는 사실상 더 이상 권장하지 않는 기술입니다.
일부 브라우저에서 지원할 수 있지만 관련된 웹 표준에서는 이미 제거되어 있어 호환성 목적으로만 유지될 수 있다고 합니다.


그래서 execComand() 방식 외에 클립보드에 데이터를 복사하는 대체 방법으로 Clipboard API이 있습니다.

 

클립보드 복사하기

1. execCommand("copy")
; execCommand() 메서드 사용하여 copy 동작을 수행. 특정 브라우저에서 동작 안됨.

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>클립보드 복사하기</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
// $(document).ready(function(){ 
// 	$("[name=btnClick]").click(function(){ 
// 		fncClipboardCopy(); 
// 	}); 
// }); 
function fncClipboardCopy() {
	var copyArea = $("#copyArea");
	copyArea.select();
	document.execCommand("copy");
}
</script>
</head>
<body>
	<span>클립보드 복사하기</span>
	<div>
		<input type="text" id="copyArea" value="" placeholder="텍스트를 입력하세요." />
		<button type="button" name="btnClick" onclick="fncClipboardCopy();">클릭</button>
	</div>
</body>
</html>

복사할 문자를 input box에 입력하고 버튼을 클릭시 입력된 값이 복사 됩니다.
select() 또는 focus() 메서드는 textarea, input 요소에 사용할 수 있습니다.
참고로, <input type="hidden"/> 은 적용 불가합니다.

2. Clipboard API
; 클립보드 복사 기능을 지원하는 라이브러리를 사용. 폭 넓은 브라우저를 지원하며, 복사가 완료된 것을 확인할 수 있는 툴팁을 제공 한다고 합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>클립보드 복사하기</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
// $(document).ready(function(){ 
// 	$("[name=btnClick]").click(function(){ 
// 		copyToClickBoard(); 
// 	});
// }); 
function fncClickBoardApi(){ 
	if (!navigator.clipboard) { 
		// Clipboard API not available 
		return; 
	} 
	var copyArea = $("#copyArea").val(); 
	navigator.clipboard.writeText(copyArea)
		.then(resultText => { 
			console.log("Text copied to clipboard..."); 
			copyArea += resultText; 
		})
		.catch(err => { 
			console.log('Something went wrong', err); 
		}); 
}
</script>
</head>
<body>
	<span>클립보드 복사하기</span>
	<div>
		<input type="text" id="copyArea" value="" placeholder="텍스트를 입력하세요." />
		<button type="button" name="btnClick" onclick="fncClickBoardApi();">클릭</button>
	</div>
</body>
</html>

마찬가지로, 복사할 문자를 input box에 입력하고 버튼을 클릭시 입력된 값이 복사 됩니다.
navigator.clipboard의 메서드 중에 writeText() 메서드를 사용하여 input box에 입력된 값을 복사합니다.

본 소스를 활용하여 직접 소스를 구현해 테스트 해 보시길 바랍니다.
감사합니다.

 

참조 :
https://developer.mozilla.org/ko/docs/Web/API/Document/execCommand
https://developer.mozilla.org/ko/docs/Web/API/Clipboard_API

저작자표시

'IT•개발 끄적 > HTML' 카테고리의 다른 글

[HTML] 테이블(table)의 colspan과 rowspan 사용법과 예시  (0) 2021.05.24
[HTML] 테이블(table) 설명 및 레이아웃 만들기 (html table description and create lay-out)  (0) 2021.05.22
[HTML] a tag(a 태그) 사용 및 활용법(전화걸기, 문자보내기, 메일보내기)  (0) 2021.04.14
'IT•개발 끄적/HTML' Related Articles more
Comments