Skip to content

Commit 55d8044

Browse files
simonwsimonw
authored
clipboard-viewer.html
https://gist.github.com/simonw/5393dd81fcabc9f854e8bbec205e7e1e
1 parent 2c59da7 commit 55d8044

File tree

1 file changed

+130
-0
lines changed

1 file changed

+130
-0
lines changed

‎clipboard-viewer.html

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Clipboard Format Viewer</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
line-height: 1.6;
11+
margin: 0;
12+
padding: 20px;
13+
background-color: #f0f0f0;
14+
}
15+
h1 {
16+
text-align: center;
17+
color: #333;
18+
}
19+
#paste-area {
20+
width: 100%;
21+
height: 100px;
22+
margin-bottom: 20px;
23+
padding: 10px;
24+
border: 2px dashed #aaa;
25+
border-radius: 5px;
26+
resize: vertical;
27+
}
28+
#output {
29+
background-color: white;
30+
border: 1px solid #ddd;
31+
border-radius: 5px;
32+
padding: 20px;
33+
max-height: 70vh;
34+
overflow-y: auto;
35+
}
36+
.format {
37+
margin-bottom: 20px;
38+
border-bottom: 1px solid #eee;
39+
padding-bottom: 10px;
40+
}
41+
.format h2 {
42+
color: #0066cc;
43+
margin-bottom: 10px;
44+
}
45+
.format-content {
46+
max-height: 200px;
47+
overflow-y: auto;
48+
background-color: #f5f5f5;
49+
border: 1px solid #ddd;
50+
border-radius: 3px;
51+
padding: 10px;
52+
}
53+
pre {
54+
margin: 0;
55+
white-space: pre-wrap;
56+
word-wrap: break-word;
57+
}
58+
</style>
59+
</head>
60+
<body>
61+
<h1>Clipboard Format Viewer</h1>
62+
<textarea id="paste-area" placeholder="Paste here or anywhere on the page"></textarea>
63+
<div id="output"></div>
64+
65+
<script>
66+
const pasteArea = document.getElementById('paste-area');
67+
const output = document.getElementById('output');
68+
69+
function handlePaste(event) {
70+
event.preventDefault();
71+
const clipboardData = event.clipboardData || window.clipboardData;
72+
output.innerHTML = '';
73+
74+
// Get available formats
75+
const formats = clipboardData.types;
76+
77+
formats.forEach(format => {
78+
const formatDiv = document.createElement('div');
79+
formatDiv.className = 'format';
80+
81+
const formatTitle = document.createElement('h2');
82+
formatTitle.textContent = format;
83+
formatDiv.appendChild(formatTitle);
84+
85+
const formatContentWrapper = document.createElement('div');
86+
formatContentWrapper.className = 'format-content';
87+
88+
const formatContent = document.createElement('pre');
89+
let content = clipboardData.getData(format);
90+
91+
// Special handling for certain formats
92+
if (format === 'text/html') {
93+
const tempElement = document.createElement('div');
94+
tempElement.innerHTML = content;
95+
content = tempElement.innerHTML;
96+
} else if (format === 'Files') {
97+
const files = clipboardData.files;
98+
content = Array.from(files).map(file => `${file.name} (${file.type}, ${file.size} bytes)`).join('\n');
99+
}
100+
101+
formatContent.textContent = content;
102+
formatContentWrapper.appendChild(formatContent);
103+
formatDiv.appendChild(formatContentWrapper);
104+
105+
output.appendChild(formatDiv);
106+
});
107+
108+
// Additional information about the clipboard event
109+
const eventInfo = document.createElement('div');
110+
eventInfo.className = 'format';
111+
eventInfo.innerHTML = `
112+
<h2>Clipboard Event Information</h2>
113+
<div class="format-content">
114+
<pre>
115+
Event type: ${event.type}
116+
Formats available: ${formats.join(', ')}
117+
</pre>
118+
</div>
119+
`;
120+
output.appendChild(eventInfo);
121+
}
122+
123+
// Listen for paste events on the textarea
124+
pasteArea.addEventListener('paste', handlePaste);
125+
126+
// Listen for paste events on the entire document
127+
document.addEventListener('paste', handlePaste);
128+
</script>
129+
</body>
130+
</html>

0 commit comments

Comments
 (0)