"JavaScript 클립보드로 복사하기"의 두 판 사이의 차이

2021년 4월 22일 (목) 00:39 기준 최신판

1 개요

JavaScript 클립보드로 복사하기
자바스크립트 클립보드 복사

2 예시 1: textarea 임시 생성하여 복사 ★

<button onclick="copy()">COPY</button>

<script>
function copyToClipboard(val) {
  const t = document.createElement("textarea");
  document.body.appendChild(t);
  t.value = val;
  t.select();
  document.execCommand('copy');
  document.body.removeChild(t);
}
function copy() {
  copyToClipboard('Hello World');
  console.log('Copied!');
}
</script>

3 예시 2: input에서 복사

IE 10+, Chrome 43+, Opera 29+, Firefox 가능

<input id="myInput" value="Hello, World!">
<button onclick="copy_to_clipboard()">클립보드로 복사</button>

<script>
function copy_to_clipboard() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  document.execCommand("Copy");
  console.log('Copied!');
}
</script>

4 예시 3: 구식 IE

인터넷 익스플로러만 가능

<script type="text/javaScript">
function copy_to_clipboard(str) {
  window.clipboardData.setData("Text", str);
  alert("복사되었습니다.");
}
</script>

<button onclick="copy_to_clipboard('Hello Jmnote');">복사</button>

5 같이 보기

6 참고

http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript

@@ 2번째 줄: / 2번째 줄: @@
 ;JavaScript 클립보드로 복사하기
 ;자바스크립트 클립보드 복사
-* (예전 방식) 플래시 활용 [[ZeroClipboard]] 참고
-==예시 1: input에서 복사==
+==예시 1: textarea 임시 생성하여 복사 ★==
+{{참고|순수 자바스크립트 클립보드 복사 구현}}
+<syntaxhighlight lang='html' run outheight='80'>
+<button onclick="copy()">COPY</button>
+<script>
+function copyToClipboard(val) {
+  const t = document.createElement("textarea");
+  document.body.appendChild(t);
+  t.value = val;
+  t.select();
+  document.execCommand('copy');
+  document.body.removeChild(t);
+}
+function copy() {
+  copyToClipboard('Hello World');
+  console.log('Copied!');
+}
+</script>
+</syntaxhighlight>
+==예시 2: input에서 복사==
 * IE 10+, Chrome 43+, Opera 29+, Firefox 가능
-<source lang='html'>
+<syntaxhighlight lang='html' run>
 <input id="myInput" value="Hello, World!">
 <button onclick="copy_to_clipboard()">클립보드로 복사</button>
@@ 15번째 줄: / 35번째 줄: @@
    copyText.select();
    document.execCommand("Copy");
+  console.log('Copied!');
 }
 </script>
-</source>
+</syntaxhighlight>
-<jsfiddle>anz43t97</jsfiddle>
-==예시 2: 동적으로 textarea 생성하여 복사 ★==
-<source lang='html'>
-<button id='btn1'>Greet</button>
-<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
-<script>
-function copyToClipboard(text) {
-  var ta = document.createElement("textarea");
-  ta.value = text;
-  document.body.appendChild(ta);
-  ta.select();
-  document.execCommand('copy');
-  document.body.removeChild(ta);
-}
-$('#btn1').click(function() {
-  copyToClipboard('Hello World');
-  alert('Copied!');
-});
-</script>
-</source>
-<jsfiddle height='120'>oc41ah8b</jsfiddle>
 ==예시 3: 구식 IE==
 * 인터넷 익스플로러만 가능
-<source lang='html'>
+<syntaxhighlight lang='html' run>
 <script type="text/javaScript">
 function copy_to_clipboard(str) {
@@ 53번째 줄: / 51번째 줄: @@
 <button onclick="copy_to_clipboard('Hello Jmnote');">복사</button>
-</source>
+</syntaxhighlight>
-==예시 4: 구식 자동·수동 혼합==
-*익스플로러가 아닐 경우 [[prompt]]를 띄워 수동으로 복사(Ctrl+C)하도록 함
-<source lang='html5'>
-<script type="text/javaScript">
-function is_ie() {
-  if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1) return false;
-  if(navigator.userAgent.toLowerCase().indexOf("msie") != -1) return true;
-  if(navigator.userAgent.toLowerCase().indexOf("windows nt") != -1) return true;
-  return false;
-}
-function copy_to_clipboard(str) {
-  if( is_ie() ) {
-    window.clipboardData.setData("Text", str);
-    alert("복사되었습니다.");
-    return;
-  }
-  prompt("Ctrl+C를 눌러 복사하세요.", str);
-}
-</script>
-<button onclick="copy_to_clipboard('Hello Jmnote2');">복사</button>
-</source>
 ==같이 보기==