본문 바로가기
javascript

티스토리에서 자바스크립트로 클립보드 복사 만들기

해가울 2022. 10. 25. 09:58
728x90

 

 

 

 

Clipboard 복사 예제 (코드 포함)

1. navigator.clipboard API

이것은 div의 내용입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Div 복사 (Clipboard API)</title>
</head>
<body>
    <div id="test">이것은 div의 내용입니다.</div>
    <button id="copyBtn">Copy Div</button>

    <script>
    // 버튼 클릭 시 div 내용을 클립보드에 복사
    document.addEventListener('DOMContentLoaded', function() {
        var btn = document.getElementById('copyBtn');
        btn.addEventListener('click', function() {
        var text = document.getElementById('test').textContent;
        navigator.clipboard.writeText(text)
            .then(function() {
            console.log('복사 성공:', text);
            })
            .catch(function(err) {
            console.error('복사 실패:', err);
            });
        });
    });
    </script>
</body>
</html>
        
이것은
preformatted 텍스트입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Pre 복사 (Clipboard API)</title>
</head>
<body>
    <pre id="test">이것은
preformatted 텍스트입니다.</pre>
    <button id="copyBtn">Copy Pre</button>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const btn = document.getElementById('copyBtn');
        const pre = document.getElementById('test');
        btn.addEventListener('click', function() {
        navigator.clipboard.writeText(pre.textContent)
            .then(function() { console.log('복사 성공:', pre.textContent); })
            .catch(function(err) { console.error('복사 실패:', err); });
        });
    });
    </script>
</body>
</html>            
        

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Textarea 복사 (Clipboard API)</title>
</head>
<body>
    <textarea id="test" rows="3">이것은 textarea의 내용입니다.</textarea>
    <button id="copyBtn">Copy Textarea</button>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var btn = document.getElementById('copyBtn');
        var textarea = document.getElementById('test');
        btn.addEventListener('click', function() {
        navigator.clipboard.writeText(textarea.value)
            .then(function() { console.log('복사 성공:', textarea.value); })
            .catch(function(err) { console.error('복사 실패:', err); });
        });
    });
    </script>
</body>
</html>            
        

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Input 복사 (Clipboard API)</title>
</head>
<body>
    <input id="test" type="text" value="이것은 input의 값입니다.">
    <button id="copyBtn">Copy Input</button>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var btn = document.getElementById('copyBtn');
        var input = document.getElementById('test');
        btn.addEventListener('click', function() {
        navigator.clipboard.writeText(input.value)
            .then(function() { console.log('복사 성공:', input.value); })
            .catch(function(err) { console.error('복사 실패:', err); });
        });
    });
    </script>
</body>
</html>
이것은 span의 내용입니다. 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Span 복사 (Clipboard API)</title>
</head>
<body>
    <span id="test">이것은 span의 내용입니다.</span>
    <button id="copyBtn">Copy Span</button>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var btn = document.getElementById('copyBtn');
        var span = document.getElementById('test');
        btn.addEventListener('click', function() {
        navigator.clipboard.writeText(span.textContent)
            .then(function() { console.log('복사 성공:', span.textContent); })
            .catch(function(err) { console.error('복사 실패:', err); });
        });
    });
    </script>
</body>
</html>

이것은 p(Paragraph)의 내용입니다.


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Paragraph 복사 (Clipboard API)</title>
</head>
<body>
    <p id="test">이것은 p(Paragraph)의 내용입니다.</p>
    <button id="copyBtn">Copy Paragraph</button>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var btn = document.getElementById('copyBtn');
        var paragraph = document.getElementById('test');
        btn.addEventListener('click', function() {
        navigator.clipboard.writeText(paragraph.textContent)
            .then(function() { console.log('복사 성공:', paragraph.textContent); })
            .catch(function(err) { console.error('복사 실패:', err); });
        });
    });
    </script>
</body>
</html>

2. document.execCommand('copy')

이것은 div의 내용입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Div 복사 (execCommand)</title>
</head>
<body>
  <div id="test">이것은 div의 내용입니다.</div>
  <button id="btn">Copy Div</button>
  <script>
    document.getElementById('btn').addEventListener('click', () => {
      const el = document.getElementById('test');
      const range = document.createRange();
      range.selectNodeContents(el);
      const sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
      document.execCommand('copy');
      sel.removeAllRanges();
    });
  </script>
</body>
</html>
        
이것은
preformatted 텍스트입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Pre 복사 (execCommand)</title>
</head>
<body>
  <pre id="test">이것은
preformatted 텍스트입니다.</pre>
  <button id="btn">Copy Pre</button>
  <script>
    document.getElementById('btn').addEventListener('click', () => {
      const el = document.getElementById('test');
      const range = document.createRange();
      range.selectNodeContents(el);
      const sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
      document.execCommand('copy');
      sel.removeAllRanges();
    });
  </script>
</body>
</html>
        

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Textarea 복사 (execCommand)</title>
</head>
<body>
  <textarea id="test" rows="3">이것은 textarea의 내용입니다.</textarea>
  <button id="btn">Copy Textarea</button>
  <script>
    document.getElementById('btn').addEventListener('click', () => {
      const el = document.getElementById('test');
      el.select();
      document.execCommand('copy');
      window.getSelection().removeAllRanges();
    });
  </script>
</body>
</html>
        

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Input 복사 (execCommand)</title>
</head>
<body>
  <input id="test" type="text" value="이것은 input의 값입니다.">
  <button id="btn">Copy Input</button>
  <script>
    document.getElementById('btn').addEventListener('click', () => {
      const el = document.getElementById('test');
      el.select();
      document.execCommand('copy');
      window.getSelection().removeAllRanges();
    });
  </script>
</body>
</html>
이것은 span의 내용입니다. 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Span 복사 (execCommand)</title>
</head>
<body>
  <span id="test">이것은 span의 내용입니다.</span>
  <button id="btn">Copy Span</button>
  <script>
    document.getElementById('btn').addEventListener('click', () => {
      const el = document.getElementById('test');
      const range = document.createRange();
      range.selectNodeContents(el);
      const sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
      document.execCommand('copy');
      sel.removeAllRanges();
    });
  </script>
</body>
</html>

이것은 p(Paragraph)의 내용입니다.


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Paragraph 복사 (execCommand)</title>
</head>
<body>
  <p id="test">이것은 p(Paragraph)의 내용입니다.</p>
  <button id="btn">Copy Paragraph</button>
  <script>
    document.getElementById('btn').addEventListener('click', () => {
      const el = document.getElementById('test');
      const range = document.createRange();
      range.selectNodeContents(el);
      const sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
      document.execCommand('copy');
      sel.removeAllRanges();
    });
  </script>
</body>
</html>
728x90

'javascript' 카테고리의 다른 글

자바스크립트로 정규 표현식 (Regular expression) 테스트  (1) 2023.10.03
자바스크립트(javascript) 클래스(Class) 알아보기  (0) 2023.10.01
자바스크립트(Javascript) 변수 기본  (1) 2023.10.01
자바스크립트로 프로그레스바 만들기  (0) 2023.09.02
자바스크립트로 파일 드래그 앤 드롭 업로드 방법  (0) 2023.09.02

'javascript' Related Articles

티스토리툴바