Skip to main content

JavaScript
How to Use the Clipboard API

script.js

// AZUL CODING ---------------------------------------
// JavaScript - How to Use the Clipboard API
// https://youtu.be/8VaGfDyP4l4


/* Part 1: Copy and paste text */

function copyText() {
    let val = document.getElementById("copy-textbox").value;
    navigator.clipboard.writeText(val).then(function() {
        alert("Text copied to clipboard");
    });
}

function pasteText() {
    navigator.clipboard.readText().then(function(clipText) { 
        document.getElementById("paste-textbox").value = clipText
    }, function() {
        alert("Failed to access clipboard");
    });
}


/* Part 2: Using event listeners */

function setMessage(message) {
    document.getElementById("event-text").innerText = message;
    setTimeout(() => {
        document.getElementById("event-text").innerText = "";
    }, 2000);
}

document.addEventListener("DOMContentLoaded", function(event) {
    var copyPasteTextbox = document.getElementById("copy-paste-textbox");

    copyPasteTextbox.addEventListener('cut', (event) => {
        let selection = document.getSelection().toString().toUpperCase();
        event.clipboardData.setData('text/plain', selection);

        let val = copyPasteTextbox.value;
        let start = copyPasteTextbox.selectionStart; 
        let end = copyPasteTextbox.selectionEnd;
        copyPasteTextbox.value = val.slice(0, start) + val.slice(end);
        copyPasteTextbox.setSelectionRange(start, start);

        setMessage("Cut text: " + selection);
        event.preventDefault();
    });

    copyPasteTextbox.addEventListener('copy', (event) => {
        let selection = document.getSelection().toString();
        setMessage("Copied text: " + selection);
    });

    copyPasteTextbox.addEventListener('paste', (event) => {
        let paste = (event.clipboardData || window.clipboardData).getData('text');
        setMessage("Pasted text: " + paste);
    });
});


/* Part 3: Pasting images */

document.onpaste = function(event) {
    let data = event.clipboardData || window.clipboardData;

    if (data.files.length) {
        let file = data.files[0];

        if (file.type.startsWith("image/")) {
            let reader = new FileReader();
            reader.readAsDataURL(file);

            reader.onload = function() {
                let img = document.getElementById("clipboard-image");
                img.setAttribute("src", reader.result);
                document.getElementById("filename").innerText = file.name;
            }
        }
    }
};

Enjoying this tutorial?


index.html

<!-- AZUL CODING --------------------------------------- -->
<!-- JavaScript - How to Use the Clipboard API -->
<!-- https://youtu.be/8VaGfDyP4l4 -->


<!DOCTYPE html>
<html>
    <head>
        <title>Clipboard API - Azul Coding</title>
        <style>
            body {
                margin: 30px;
            }
            * {
                font-family: 'Roboto';
            }
            p, button, input[type=text] {
                font-size: 16px;
            }
            button {
                display: inline-block;
                margin: 5px;
                padding: 5px 10px;
                min-width: 70px;
            }
            input[type=text] {
                padding: 5px;
                width: 300px;
            }
        </style>
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Clipboard API</h1>
        
        <!-- Part 1 -->
        <p>Copy and paste text</p>
        <input type="text" id="copy-textbox">
        <button onclick="copyText();">Copy</button><br>
        <input type="text" id="paste-textbox">
        <button onclick="pasteText();">Paste</button>

        <!-- Part 2 -->
        <p>Using event listeners</p>
        <input type="text" id="copy-paste-textbox">
        <p id="event-text"></p>

        <!-- Part 3 -->
        <p>Pasting images</p>
        <img src="" id="clipboard-image" width="300">
        <p id="filename"></p>
    </body>
</html>