클립보드(Clipboard)에 복사

자바스크립트에서 선택한 영역의 텍스트를 클립보드(Clipboard)에 복사하는 코드를 구현해보았다.

검색해보면 서로 다른 몇 가지 코드가 나오는데, 접근 권한이 과거에 비해 약해진 것, 운영체제별 차이로 인해 갈라지는 코드들이다.

export const copyToClipboard = (val) => {
    if (navigator.clipboard) toClipboard(val)
    else toClipboardLegacy(val)
}

const toClipboard = (val) => {
    navigator.clipboard.writeText(val)
        .then(() => {
            console.log("Navigator: Text copied to clipboard!")
        })
        .catch(e => {
            console.log('Navigator: (error)', e);
        })
}

const toClipboardLegacy = (val) => {
    const textarea = document.createElement('textarea');
    textarea.value = val;

    document.body.appendChild(textarea);
    textarea.select();
    textarea.setSelectionRange(0, 9999);

    document.execCommand('copy');
    document.body.removeChild(textarea);
}

애플이나 늙은 브라우저들은 아마 toClipboardLegacy 쪽으로 빠져서 실행이 된다는 것 같은데 확인해보지는 않았다.