TIL / Javascript 클립보드로 내용 복사

Career/웹

TIL / Javascript 클립보드로 내용 복사

wood.forest 2020. 8. 22. 10:31

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copy into clipboard example</title>
</head>

<body>
    <h1 id="copyText">Click this to Copy!</h1>
    <p id="resultText"></p>
</body>
<script type="text/javascript">
    (document.querySelector('#copyText').addEventListener('click', (e) => {
        try{
            const selection = window.getSelection()
            const range = document.createRange()
            range.selectNodeContents(e.currentTarget)
            selection.removeAllRanges()
            selection.addRange(range)
            document.execCommand('copy')

            document.querySelector('#resultText').innerText = 'Success. Try to paste it somewhere'
        } catch (ex) {
            document.querySelector('#resultText').innerText = `Fail. ${ex}`
        }
    }))
</script>

</html>

https://alligator.io/js/copying-to-clipboard/

Copying to Clipboard Using Vanilla JavaScript

You're a dozen lines of code away from implementing a copy to clipboard functionality using 0 libraries and just some simple JavaScript.

alligator.io

를 참고.

https://github.com/wooooooood/Today-I-Learned/blob/master/Javascript/%EA%B8%B0%EB%8A%A5/Copy%20into%20Clipboard.html

wooooooood/Today-I-Learned

TIL. Contribute to wooooooood/Today-I-Learned development by creating an account on GitHub.

github.com

를 마이그레이션한 늑낌

728x90