링크 복사하기 버튼 만들기

버튼을 클릭하면 input에 담긴 value가 바로 복사되는 버튼을 만들어 봤다.

 

우선 value가 가상의 공간에 담기고, 그것을 복사하게 되는

copyToClipboard 함수를 만든다.

/* 클립보드로 복사 */
function copyToClipboard(val){
   let text = document.createElement("textarea");
   document.body.appendChild(text);
   text.value = val;
   text.select();
   document.execCommand('copy');
   document.body.removeChild(text);
}

참고 한 것은 여기! https://manition.tistory.com/8

 

위의 함수를 활용해서 '복사하기' 버튼을 클릭하면

input에 담긴 value를 복사해보자.

복사가 정상적으로 되었다는 정보가 없으면 복사가 된 것인지 알 수 없기 때문에

복사가 완료된 후 alert도 추가해주었다.

$(".copybtn").on("click", function(){
    const url = $("#link").val();
    
    if(url != null){
        copyToClipboard(url);
        alert("링크가 복사되었습니다.");
    } else {
    	return;
    }
});

 

 

간단하지만 로직을 생각해내는 것은 역시 쉽지 않다^_ㅠ