Project

General

Profile

copy_paste_example_20150713.html

Greg Shah, 07/13/2015 05:20 PM

Download (3.6 KB)

 
1 
<!DOCTYPE html>
2 
<html lang="en">
3 
<head>
4 
<meta charset="utf-8" />
5 
<title>Clipboard Example</title>
6 
<script>
7
8 
var inp;
9
10 
var butt;
11
12 
var lastEvent = null;
13
14 
// In non-IE browsers, we save off the clipboardData instances when a valid event occurs.
15 
var savedClipboard = null;
16
17 
function dumpObject(obj)
18 
{
19 
   var txt = "";
20 
   var pad = ""
21
22 
   for (var prop in obj)
23 
   {
24 
      txt = txt + pad + prop + " = " + obj[prop] + ";\n";
25 
      pad = " ";
26 
   }
27
28 
   return txt;
29 
}
30
31 
window.onload=function()
32 
{
33 
   document.oncontextmenu = function()
34 
   {
35 
      return true;
36 
   };
37
38 
   document.onkeydown = function(event)
39 
   {
40 
      // alert("keydown event:\n" + dumpObject(event));
41
42 
      // put data to copy on clipboard
43 
      inp.value = "DATA";
44 
      inp.focus();
45 
      inp.select();
46 
   }
47
48 
   function setDeferredText(e)
49 
   {
50 
      if (window.clipboardData)
51 
      {
52 
         var txt = window.clipboardData.getData("Text");
53 
         alert("paste (ie): " + txt);
54 
      }
55 
      else if (savedClipboard === null)
56 
      {
57 
         alert("No savedClipboard instance yet!");
58 
      }
59 
      else
60 
      {
61 
         // THIS DOES NOT RESULT IN THE UPDATED DATA GETTING INTO THE CLIPBOARD!
62 
         // no errors occur, but the clipboard is never modified
63 
         var text = inp.value + " " + new Date();
64 
         alert(dumpObject(savedClipboard));
65 
         savedClipboard.clearData();
66 
         savedClipboard.setData("text/plain", text);
67 
         alert(lastEvent + " (chrome & firefox & opera): " + text);
68 
      }
69 
   }
70
71 
   inp = document.getElementById("copy");
72 
   inp.focus();
73
74 
   butt = document.getElementById("deferred");
75 
   butt.addEventListener("click", setDeferredText);
76
77 
   function pasteHandler(e)
78 
   {
79 
      if (window.clipboardData)
80 
      {
81 
         var txt = window.clipboardData.getData("Text");
82 
         alert("paste (ie): " + txt);
83 
      }
84 
      else if (e.clipboardData)
85 
      {
86 
         savedClipboard = e.clipboardData;
87
88 
         // get text representation of clipboard
89 
         var txt = e.clipboardData.getData("text/plain");
90 
         alert("paste (chrome & firefox & opera): " + txt);
91 
      }
92
93 
      lastEvent = "paste";
94
95 
      e.preventDefault();
96 
   }
97
98 
   function copyWorker(descr, e)
99 
   {
100 
      // value to copy
101 
      var text = inp.value + " " + new Date();
102
103 
      // copy to clipboard
104 
      if (window.clipboardData)
105 
      {
106 
         window.clipboardData.clearData();
107 
         window.clipboardData.setData("Text", text);
108 
         alert(descr + " (ie): " + text);
109 
      }
110 
      else if (e.clipboardData)
111 
      {
112 
         savedClipboard = e.clipboardData;
113 
         alert(dumpObject(savedClipboard));
114
115 
         e.clipboardData.clearData();
116 
         e.clipboardData.setData("text/plain", text);
117 
         alert(descr + " (chrome & firefox & opera): " + text);
118 
      }
119
120 
      lastEvent = descr;
121
122 
      e.preventDefault();
123 
   }
124
125 
   function copyHandler(e)
126 
   {
127 
      copyWorker("copy", e);
128 
   }
129
130 
   function cutHandler(e)
131 
   {
132 
      copyWorker("cut", e);
133 
   }
134
135 
   // ie, chrome, firefox
136 
   window.addEventListener("paste", pasteHandler);
137 
   window.addEventListener("copy", copyHandler);
138 
   window.addEventListener("cut", cutHandler);
139
140 
};
141 
</script>
142 
</head>
143 
<body>
144 
<div>Copy CTRL-C / Paste CTRL-V on this page.</div>
145 
<button id="deferred">Deferred Text Entry</button>
146 
<form name="form" action="#" method="post">
147 
   <input type="text" name="copy" id="copy" value="" style="opacity:0;position:fixed;top:0px;left:0px;margin-left-20px"/>
148 
</form>
149 
</body>
150 
</html>