[Javascript] clipboard.js를 이용해 웹에서 클립보드에 복사하기

clipboard.js를 이용해 웹에서 클립보드에 내용을 복사해보자

내용은 공식문서를 참고하여 제작하였습니다.


환경 및 선수조건

  • HTML, CSS, Javascript에 대한 기본 이해


설치

npm을 통한 설치 or 다운로드를 통해서 설치합니다.

$ npm install clipboard --save

파일 링크 : https://github.com/zenorocha/clipboard.js/archive/master.zip

설치를 하지 않고 html에 cdn을 통한 링크를 이용해서도 사용이 가능합니다:) 즉, 굳이 설치하고 싶지 않으신 분들은 상관이 없습니다.


셋업

js파일 첨부

파일이 아니라 cdn을 통해서 링크를 첨부하고 싶다면 아래 방법처럼 사용하면 됩니다. 저는 아래 방법을 사용하였으며 링크는 다음과 같습니다(CDN Link)

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

위에서 받은 파일을 통한 설치는 아래와 같으며(파일의 경로로 해줘야 합니다.)

<script src="dist/clipboard.min.js"></script>


Clipboard 객체 생성

자바스크립트 코드 안에 다음 아래 코드처럼 객체를 생성해야합니다.

생성을 할 때 인자로는 이벤트를 발생시키고자 하는 HTML 태그를 DOM selector,HTML element 또는 HTML element들의 list 형태로 넘겨줘야합니다. 아래 예제들은 clipboard.js에 있는 예시들 3개와 제일 아래는 제가 적용한 예제입니다.

class 지정을 통한 예제

<body>
    <!-- 1. Define some markup -->
    <button class="btn" data-clipboard-text="1">Copy</button>
    <button class="btn" data-clipboard-text="2">Copy</button>
    <button class="btn" data-clipboard-text="3">Copy</button>

    <!-- 2. Include library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard by passing a string selector -->
    <script>
    var clipboard = new Clipboard('.btn');
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>

id 지정을 통한 예제

<body>
    <!-- 1. Define some markup -->
    <div id="btn" data-clipboard-text="1">
        <span>Copy</span>
    </div>

    <!-- 2. Include library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard by passing a HTML element -->
    <script>
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>

tag 지정을 통한 예제

<body>
    <!-- 1. Define some markup -->
    <button data-clipboard-text="1">Copy</button>
    <button data-clipboard-text="2">Copy</button>
    <button data-clipboard-text="3">Copy</button>

    <!-- 2. Include library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard by passing a list of HTML elements -->
    <script>
    var btns = document.querySelectorAll('button');
    var clipboard = new Clipboard(btns);
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>

제 경우에는 웹페이지가 로드될 때 객체를 생성하기 위해서 $(document).ready()안에다가 작성하였습니다.

<script type="text/javascript" language="javascript">
...
$(document).ready(function(){
    // 모든 이미지 tag들을 list형태로 가져옴
    var imgs = document.querySelectorAll('img');

    // 위에서 가져온 list들을 Clipboard 객체를 생성할 때 넘겨줌
    var clip = new Clipboard(imgs);

    // 클립보드에 복사가 완료되었을 때 실행할 이벤트 함수
    // 성공시
    clip.on('success', function(e) {
      console.log("Success");
      ...
    });
    // 실패시
    clipboard.on('error', function(e) {
      console.log("Error");
      ...
    });
});
...
</script>


사용법

1. data-clipboard-target을 통한 사용법

복사하고자하는 값을 가지고 있는 태그에 id를 부여하고 이벤트를 발생시키고 싶은 태그에 data-clipboard-target 속성을 설정하고 거기에 값을 앞에서 설정한 id로 지정을 해줍니다.

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

2. data-clipboard-text을 통한 사용법

복사하고자 하는 태그를 설정할 필요없이 현재 태그에서 이벤트를 발생시키고 값도 복사하고 싶다면 아래처럼 data-clipboard-target를 이벤트를 발생시키고 싶은 태그에 넣어서 사용하시면됩니다.

<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>


이벤트

위에 이미 예제에서 나와 있었지만 생성한 Clipboard 객체를 사용해서 이벤트를 작성합니다.

// 모든 이미지 tag들을 list형태로 가져옴
var imgs = document.querySelectorAll('img');

// 위에서 가져온 list들을 Clipboard 객체를 생성할 때 넘겨줌
var clip = new Clipboard(imgs);

// 클립보드에 복사가 완료되었을 때 실행할 이벤트 함수
// 성공시
clip.on('success', function(e) {
  console.log("Success");
  ...
});
// 실패시
clipboard.on('error', function(e) {
  console.log("Error");
  ...
});


예제코드

https://github.com/TWpower/clipboard.js-example/blob/master/clipboard-js-example.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clipboard.js simple example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!--1. clipboard.js 파일 cdn을 통해서 로드-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

    <!--2. 스크림트 파일 작성-->
    <script>

        // 3. 웹 문서가 로드되면 클립보드 객체 생성
        $(document).ready(function(){

            var clipboard = new Clipboard('.btn');
            clipboard.on('success', function(e) {
                console.log("Success");

                /*
                아래 함수를 통해서 블록지정을 없앨 수 있습니다.
                */
                var selection = window.getSelection();
                selection.removeAllRanges();
            });
            clipboard.on('error', function(e) {
                console.log("Fail");
            });

            // 아래와 같이 button 태그만 가져오는 방법도 가능하다.
            /*
            var btns = document.querySelectorAll('button');
            var clipboard = new Clipboard(btns);
            */


        });


    </script>
</head>



<body>
    <!--data-clipboard-target 예제-->
    <input id="foo" value="This is Value">
    <button class="btn" data-clipboard-target="#foo">data-clipboard-target example</button>

    <br/>

    <!--data-clipboard-text 예제-->
    <button class="btn" data-clipboard-text="data-clipboard-text test">data-clipboard-text example</button>


</body>
</html>


참고자료

[Docker] 도커(Docker) 이미지 이름과 태그 목록 가져오기

> 도커(Docker) 이미지 이름과 태그 목록을 awk과 tail 명령어를 이용해 가져오는 방법을 알아보자## 환경- Linux 기반 시스템- Bash shell(/bin/bash)- Docker- awk, tail 명령어## 도커(Docker...… Continue reading