[Javascript] navigator.clipboard.write 사용시 PC와 아이폰은 되지만 안드로이드만 실패할 경우

아래와 같은 코드로 클립보드 문자를 복사하는 코드를 만드는 경우가 종종 있다.

function copy() {
    const text = 'copy text';
    navigator.clipboard.writeText(text);
    alert("복사되었습니다.");
}

<a href="#" on:click={copy}>test</a>

PC 브라우저와 아이폰에서 정상동작하여 별 생각 없이 썼는데, 안드로이드에선 클립보드 복사가 동작하지 않는다는 문의가 들어왔다. 원인은 Promise 처리를 제대로 안했기 때문이다.

 

코드를 다음과 같이 해결하면 된다.

function copy() {
    const text = 'copy text';
        navigator.clipboard.writeText(text).then(() => {
            alert("복사되었습니다.");
        }).catch((err) => {
            alert("복사에 실패하였습니다.");
        });
}

<a href="#" on:click={copy}>test</a>

 

또는 async / await 를 이용할 수도 있다.

async function copy3() {
    const text = 'copy text';
    await navigator.clipboard.writeText(text);
    alert("복사되었습니다.");
}

<a href="#" on:click={copy}>test</a>