[javascript] 클립보드(clipboard.js) 사용방법

 

Project 수행 중 버튼으로 clipboard를 이용해야 하는 상황이 왔다

 

현재상황

버튼이 속한 하나의 row마다, id를 복사하는 버튼을 만드려고 한다.

 

 

 

다음은 w3school 예제다

이 경우는 script에서 id로 값을 가져와 값을 선택해서 복사하는 형태다

하지만 내 경우는 버튼이 저렇게 많아서 id를 쓰지도 못하고 버튼마다 value값을 넣어줘서. select() 메소드를 사용하지도 못한다.

 

 

.select()는 input 태그일 경우

문자열이 드래그가 되어있다.

w3school에서는 우리가 드래그 -> ctrl + s라는 과정을 javascript로 만든 것이다.

 

 

그래서 난 이 방법을 선택했다.

https://twpower.github.io/81-use-clipboard.js-in-javascript

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

 

jsp

function myFunction() {
	var clipboard = new Clipboard('.btn');
    clipboard.on('success', function(e) {
        console.log(e);
        alert("Copy Success");
    });
    clipboard.on('error', function(e) {
        console.log(e);
        alert("Copy Failed");
    });
	}

<td><button class="btn btn-primary" data-clipboard-text="${test.id}" onclick="myFunction()">Copy text</button></td>

 

 

 

실행 처음

 

실행 두 번째

 

처음엔 한번 복사 두 번째에는 두번 복사 세 번째에는 세번 복사 이런 식으로 점점 복사하는 횟수가 늘어나게 된다.

아직은 무슨 원리로 이렇게 횟수가 쌓여서 계속 복사가 되는지에 대해서 정확히는 잘 모른다.

추측을 해보면 단일 페이지에서 작업을 해서 DOM과 관련되어 있는 것 같아 보이는(?) 정도인 것 같다.

 

 

 

해결(최종)

function myFunction() {
	var clipboard = new Clipboard('.btn');
    clipboard.on('success', function(e) {
        console.log(e);
        alert("Copy Success");
	    clipboard.destroy();
	    /*or location.reload(); 를 사용해도 잘 돌아간다.  */
    });
    clipboard.on('error', function(e) {
        console.log(e);
        alert("Copy Failed");
        clipboard.destroy();
    });
	}

완성!