버튼을 클릭하면 클립보드에 복사하기, Button, Clipboard

 

주말을 맞이하여

잠깐 생각해둔 바 있던

개인 프로젝트를 진행해보고 있습니다.

 

당근빠따 실력은 아직 미천하지만

그 동안 공부해온 내용 수준 안에서

완성을 해 볼 수 있는 수준으로 기획했습니다.

 

Kin Converter라고 일단

대충 이름을 붙여봤는데요

 

 

상단 Textarea에 코드를 넣고

[ Convert ] 버튼을 클릭하면

 

 

변경된 코드가 아래쪽 Textarea에 출력되고

 

 

이때 알아서 복사해가거나

[ Copy to ClipBoard ] 버튼을 클릭하면

메모리에 복사가 되어

퍼가기 쉽게 하는 기능입니다.

 

요즘은 유튜브나 다른 서비스들에서도

저렇게 버튼을 클릭하면

생성된 코드를 메모리에 복사해주는

그런 기능들을 자주 볼 수 있습니다.

 

 

---

 

자, 실습!

일단 버튼을 하나 만들고

onclick 이벤트를 받으면

copyToClipBoard() 함수를 호출하도록 했습니다.

 

<button type="button" class="btn btn-secondary"
	onclick="copyToClipBoard()">Copy to ClipBoard</button>

 

버튼은 bootstrap에서 업어왔습니다.

 

 

호출부를 만들었으니,

호출시 실행될 copyToClipBoard() 함수를

기능정의 해야겠죠?

 

 

함수를 살펴보도록 해봅시다.

 

function copyToClipBoard() {
        const content = document.querySelector("#outputCode");
        content.select();
        document.execCommand("copy");
        alert("Copied!");
      }

 

#outputCode는 변경된 코드가 나타나는

아랫쪽 Textarea에 붙인 id 입니다.

 

const content = document.querySelector("#outputCode");

DOM으로 접근해서 

content 변수에 넣어줍니다.

 

content.select();

.select()는 저도 이번에 처음 만나게 되었는데,

text필드 등의 인풋창 value에 해당하는

TEXT를 선택해주는 기능입니다.

 

아래 예제처럼

글자를 마우스로 긁은 것처럼

select(선택)해주는 기능입니다.

 

예제 확인은 이곳에서...

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_text_select 

W3Schools online HTML editor

 

선택이 되었으니 복사를 해줘야겠죠?

 

document.execCommand("copy");

문서 내에서 exexCommand를 이용해서 카피합니다.

어디에? 클립보드에 말이죠.

 

프로그램 적으로는 이미 카피되었지만

사용자에게 친절하게 안내해주기 위해서

 

alert("Copied!");

얼럿창을 띄워주게 되는 것이죠.

 

 

 

그러면 이렇게 Alert 창이 뜹니다.

[확인] 버튼을 클릭해주면 Alert이 닫히고,

 

 

요렇게 TEXT가 선택된 상태로

친절하게 표시해줍니다.

 

메모리에 복사가 잘 되었는지 확인을 위해

아랫쪽 빈 칸에 마우스 콕! 찍고

Ctrl + V를 눌러줍니다.

 

 

욜~ 똑 같은 내용으로 잘 찍힙니다.

 

뭔가 마치 손 안대고

코 푼 느낌이 듭니다.^^

 

 

토요일 하루 투자해서

기본적인 로직구현은 완료를 했습니다.

 

스스로 뭔가 하나를 만들어 냈다는 기쁨이

온 몸을 감싸주는군요!!

 

다음 주까지는

틈틈히 짬 나는대로

UI를 입혀서 보기 좋게

먹기 좋게 만들어 봐야겠습니다.

 

 

즐코딩 하세요!

으라차차차 파이팅!!!

 

Kincoding.