javascript execCommand (복사 기능)

 

다양한 사이트에서 버튼을 클릭하면 텍스트를 복사해서 copy할 수 있는 기능을 사용한다. 

복사기능을 구현하는데는 execCommand API를 사용하거나 clipboard API를 사용하는 두 가지 방법이 있다.

* clipboard API 최신 스펙으로 지원하지 않는 브라우저가 많습니다. 

 

저는 execCommand API를 활용해서 클릭시 복사기능을 구현했다.

 

---

---

 

Github Source ☝ 구현 소스를 보실수 있습니다.

https://github.com/yoogukhyeon/vanilla_javascript

GitHub - yoogukhyeon/vanilla_javascript

---

 

 

1. 함수를 생성

2. 클립보드에 dom을 가져온다.

3. 가져온 dom에 value를 select 한다. 

4. execCommand API로 select에 value를 copy한다. 

* execCommand API 복사 완료시 true 반환값 실패시 false 반환값을 준다. 

<script>
    // copy 함수
    function copy() {
        // copy를 원하는 돔을 가져온다.
        const descVal = document.getElementById('desc');
        // 가져온 돔에 value select한다.
        descVal.select();
        // execCommand API를 활용해서 copy를한다.
        const returnValue = document.execCommand('copy');

        if (returnValue) {
            alert('복사를 완료했습니다.');
            descVal.value = '';
        }
    }

    //붙여넣기 글 지우기
    function remove() {
        const descVal = document.getElementById('remove_desc');
        descVal.value = '';
    }
</script>