UNPKG

3.43 kBHTMLView Raw
1<!doctype html>
2<html>
3<head>
4 <meta charset="utf-8" />
5 <title>clipboard-polyfill</title>
6 <link rel="stylesheet" href="index.css">
7 <script src="build/clipboard-polyfill.promise.js"></script>
8 <script>
9 // Workaround for:
10 // - IE9 (can't bind console functions directly), and
11 // - Edge Issue #14495220 (referencing `console` without F12 Developer Tools can cause an exception)
12 var infoOrLog = function() {
13 (console.info || console.log).apply(console, arguments);
14 };
15 clipboard.setDebugLog(infoOrLog);
16 </script>
17 <style>
18 .editable {
19 min-width: 20px;
20 min-height: 1em;
21 border: 1px solid #AAA;
22 }
23 </style>
24</head>
25<body>
26
27<div class="header">
28 <a href="https://github.com/lgarron/clipboard-polyfill">clipboard-polyfill</a>
29</div>
30<div class="ribbon"></div>
31<div class="content">
32
33 <h2>Plain Text</h2>
34
35 <button id="plain-copy">Copy text (plain)</button>
36 <span id="plain-copy-result"></span>
37 <script>
38 document.getElementById("plain-copy").addEventListener("click", function() {
39 var resultField = document.getElementById("plain-copy-result");
40
41 clipboard.writeText("This text is plain.").then(function(){
42 resultField.textContent = "success";
43 }, function(err){
44 resultField.textContent = err;
45 });
46 });
47 </script>
48
49 <h2>Markup</h2>
50
51 <button id="markup-copy">Copy text (markup)</button>
52 <span id="markup-copy-result"></span>
53 <script>
54 document.getElementById("markup-copy").addEventListener("click", function() {
55 var resultField = document.getElementById("markup-copy-result");
56
57 var dt = new clipboard.DT();
58 dt.setData("text/html", "<i>Markup</i> <b>text</b>. Paste me into a rich text editor.");
59 dt.setData("text/plain", "Fallback markup text. Paste me into a rich text editor.");
60 clipboard.write(dt).then(function(){
61 resultField.textContent = "success";
62 }, function(err){
63 resultField.textContent = err;
64 });
65 });
66 </script>
67
68 <h2>DOM node</h2>
69
70 <button id="markup-dom-copy">Copy markup (DOM node &rarr; markup)</button>
71 <span id="markup-dom-copy-result"></span>
72 <br>
73 <span id="markup-dom-copy-source" style="font-family: Helvetica;"><i><span style="font-size: 150%">T</span>his</i> <span style="background: orange; padding: 0px 2px">will be</span> <b>copied</b>.</span>
74 <script>
75 document.getElementById("markup-dom-copy").addEventListener("click", function() {
76 var resultField = document.getElementById("markup-dom-copy-result");
77
78 var dt = new clipboard.DT();
79 dt.setData("text/html", new XMLSerializer().serializeToString(document.getElementById("markup-dom-copy-source")));
80 dt.setData("text/plain", document.getElementById("markup-dom-copy-source").innerText);
81 clipboard.write(dt).then(function(){
82 resultField.textContent = "success";
83 }, function(err){
84 resultField.textContent = err;
85 });
86 });
87 </script>
88
89 <h2>Paste Text</h2>
90
91 <button id="paste">Paste Text</button>
92 <span id="paste-result"></span>
93 <script>
94 document.getElementById("paste").addEventListener("click", function() {
95 var resultField = document.getElementById("paste-result");
96
97 clipboard.readText().then(function(result) {
98 resultField.textContent = result;
99 }, function(err) {
100 resultField.textContent = err;
101 });
102 });
103 </script>
104
105<br>
106<br>
107<h2>Paste Area</h2>
108<div contenteditable="true" class="editable"></div>
109</div>
110
111</body>
112</html>