JavaScript

JavaScript - 특정 영역을 클립보드에 복사하는 다양한 방법 (+ id값을 자바스크립트로 전달)

pymin 2022. 12. 18. 04:23
반응형

 

매번 파이썬만 글을 썼는데 이제는 자바스크립트도 조금씩 글을 쓰고자 한다. 자바스크립트는 파이썬 flask나 django를 다룰때 많이 사용했었다. (django를 공부하려면 하단 참고)

2022.11.05 - [Python/Do something] - python(django) - 장고로 웹페이지 만들기 (1)

 

 

이번편은 html 특정 영역을 PC의 클립보드에 복사하는 방법들에 대해 확인한다. 

 

1. input의 id를 찾고 value값을 그대로 복사하기

 - id를 찾고 해당 id의 value값이 잘 복사된다.

<input type="text" id="input_content" value="pymin1">
<input type="button" value="복사 버튼" onclick="input_copy()"/>

<script type="text/javascript">
    function input_copy() {
        var act_job = document.getElementById("input_content");
        act_job.select();
        document.execCommand("Copy");
        alert(act_job.value);
    }
</script>

 

 

2. textarea를 임시로 생성해서 innerHTML값을 복사하기

<input type="text" id="input_content" value="pymin1">
<input type="button" value="복사 버튼" onclick="input_copy()">
<div id="inner_content">pymin_inner_content</div>
<script type="text/javascript">
    function input_copy() {
        let tmp = document.createElement("textarea");
        document.body.appendChild(tmp);
        tmp.value = document.getElementById("inner_content").innerHTML;
        tmp.select();
        document.execCommand("Copy");
        document.body.removeChild(tmp);
        alert(tmp.value);
    }
</script>

 

 

3. 범위로 복사하기

 - html 의 특정 영역을 선택한후 클립보드에 복사하는 방법이다. setStart와 setEnd를 지정하면 해당 값들 사이의 내용이 모두 복사가 된다. 특정 value나 innerHTML값이 아니라 테이블 전체 복사 등 활용도가 좋다.

<div id="check_0">pymin_inner_content1</div>
<div id="inner_content">pymin_inner_content2</div>
<div id="check_1">pymin_inner_content3</div>

<script type="text/javascript">
    function input_copy() {
    window.getSelection().removeAllRanges();
    let range = new Range();
    range.setStart(check_0, 0);
    range.setEnd(check_1,1);
    window.getSelection().addRange(range);
    document.execCommand("copy");
    window.getSelection().removeAllRanges();
    }
</script>

 

 

4. 내가 누른 버튼의 id 값을 자바스크립트로 넘겨서 사용하기

 - 이번 내용은 중요하다. 보통 버튼에 함수를 추가하고 해당 함수를 통해 자바스크립트를 실행하는데 만약 버튼이 여러개라면? 그때마다 별도의 함수를 만들수는 없다. 이에 내가 누른 버튼의 id값을 자바스크립트로 넘겨주면 쉽게 응용이 가능해진다. 버튼의 onclick 함수명 안에 this.id를 넣어주고, 스크립트에 clicked_id를 넘겨주면 된다.

<input type="text" id="input_content" value="pymin1">
<input type="button" value="복사 버튼" id="clicked_id_check" onclick="input_copy(this.id)">

<script type="text/javascript">
    function input_copy(clicked_id) {
        alert(clicked_id);
    }
</script>

위의 함수를 실행하면 버튼에 설정해둔 "clicked_id_check" id값이 alert으로 나타나게 된다.

 

 

그럼 이번에는 아래처럼 좀 더 응용해보자. 3가지 버튼은 같은 함수를 실핼시키지만 어떤 버튼을 누르냐에 따라 다양한 방식으로 동작하게 설정할 수 있다.

<button type="button" class="btn btn-outline-secondary" id="act_job_1" onclick="input_copy(this.id)">작업1</button>
<button type="button" class="btn btn-outline-secondary" id="act_job_2" onclick="input_copy(this.id)">작업2</button>
<button type="button" class="btn btn-outline-secondary" id="act_job_3" onclick="input_copy(this.id)">작업3</button>

<script type="text/javascript">
    function input_copy(clicked_id) {
        if ( clicked_id=="act_job_1" ) {alert("버튼1");}
        if ( clicked_id=="act_job_2" ) {alert("버튼2");}
        if ( clicked_id=="act_job_3" ) {alert("버튼3");}
    }
</script>

 

반응형