2022-05-11 개발일기 [Django, Django template]

오늘은 많은 애로사항이 있었다. 단순히 text를 클립보드에 복사하는 기능을 만들었는데 text자체가 Djano view.py 단에 있는 context 즉 Django template을 이용하여 데이터를 뿌려줬기 때문에 text자체를 copy 했을 경우 

        111111 <-- 이런식으로 text앞에 빈 공백이 생기게 되었다. 여러 가지 구글링 시 button click event로 textarea태그를 생성하여 textarea에 copy 한 내용을 넣어서 다시 textarea를 copy 하는 방식을 대부분 사용하던데 Django template을 사용하다 보니 생각대로 기능하지 않았다. 그래서! 여러 가지 방법을 찾던 도중 해결책은 Clipboard API를 이용하여 복사하여 복사한 내용을 객체에 담아 둔 다음

replace(/ /g, "")

함수를 이용하여 빈공 백 자체를 제거하는 방법으로 택하니 애초에 다른 사람들처럼 textarea를 생성하여 remove하지 않아도 되고 그 태그 자체를 바로 복사할 수 있기 때문에 개인적으로는 더 좋은 방법인 거 같다!

 

 

개발 스크립트 [jQuery]

$(function () {
    $("#btn-copy-content1").click(function () {
        let x = $('.textDiv').text()
        let plz = x.replace(/ /g, "");
        navigator.clipboard.writeText(plz)
        alert('복사되었습니다.')
    });
});