MSEdgeExplainers/ClipboardAPI/ClipboardChangeEvent/clipboard-change-event-example-app.html at 69eb214e78258c13c86a566a0d61ace438548511 · MicrosoftEdge/MSEdgeExplainers · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clipboard Format Checker</title>
    <script>
        const isClipboardChangeEventAvailable = true;

        async function checkClipboard() {
            try {
                console.log("Clipboard changed!");
                const clipboardItems = await navigator.clipboard.read();
                let formats = {};

                for (const item of clipboardItems) {
                    if (item.types.includes('text/plain')) {
                        const textBlob = await item.getType('text/plain');
                        const text = await textBlob.text();
                        document.getElementById('clipboardText').innerText = text;
                        formats.text = true;
                    }
                    else {
                        document.getElementById('clipboardText').innerText = "N/A";
                    }
                    if (item.types.includes('image/png') || item.types.includes('image/jpeg')) {
                        const imgBlob = await item.getType(item.types.find(type => type.startsWith('image/')));
                        const imgUrl = URL.createObjectURL(imgBlob);
                        document.getElementById('clipboardImg').innerHTML = `<img src="${imgUrl}" alt="Clipboard Image" width="150">`;
                        formats.img = true;
                    }
                    else {
                        document.getElementById('clipboardImg').innerText = "N/A";
                    }
                    if (item.types.includes('text/html')) {
                        const htmlBlob = await item.getType('text/html');
                        const html = await htmlBlob.text();
                        document.getElementById('clipboardHtml').innerText = html;
                        formats.html = true;
                    }
                    else {
                        document.getElementById('clipboardHtml').innerText = "N/A";
                    }
                }

                document.getElementById('pasteText').disabled = !formats.text;
                document.getElementById('pasteImg').disabled = !formats.img;
                document.getElementById('pasteHtml').disabled = !formats.html;
            } catch (err) {
                console.error('Failed to read clipboard contents: ', err);
            }
        }


        if (isClipboardChangeEventAvailable) {

            // Try to read the clipboard to trigger a permissions prompt if required.
            navigator.clipboard.readText().then(() => {

                console.log("Clipboard read permission granted");

                // Invoke the on clipboardchange handler on page load to initialize current UI state
                checkClipboard();

                // Start listening to the clipboardchange event
                navigator.clipboard.addEventListener("clipboardchange", checkClipboard);
            });

        }
        else {
            // Invoke the on clipboardchange handler on page load to initialize current UI state
            checkClipboard();
            // Since clipboardchange event is not available, fallback to polling
            setInterval(checkClipboard, 2000);
        }
    </script>
</head>

<body>
    <h1>Clipboardchange event demo app - Paste formats viewer</h1>
    <p>
        This HTML application demonstrates the use of the clipboardchange event to monitor
        and display clipboard data in various formats. The app listens for changes to the
        clipboard using the clipboardchange event. It then displays the clipboard data in a table
        with columns for Text, Image, and HTML formats.
        <br />
        When the clipboard content changes, the app updates the table to show the current clipboard data.
        The app includes buttons for pasting clipboard data as Text, Image, and HTML.
        These buttons are initially disabled and are enabled based on the available clipboard formats.

    </p>
    <hr />
    <button id="pasteText" disabled>Paste as Text</button>
    <button id="pasteImg" disabled>Paste as Image</button>
    <button id="pasteHtml" disabled>Paste as HTML</button>
    <br />
    <hr />
    <table border="1">
        <thead>
            <tr>
                <th>Text</th>
                <th>Image</th>
                <th>HTML</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td id="clipboardText">N/A</td>
                <td id="clipboardImg">N/A</td>
                <td id="clipboardHtml">N/A</td>
            </tr>
        </tbody>
    </table>
</body>

</html>