Revision 1037786 of copy

<p>The <code>copy</code> event is fired when the user initiates a copy action through the browser UI (for example, using the CTRL/Cmd+C keyboard shortcut or selecting the "Copy" from the menu) and in response to an allowed {{domxref("Document.execCommand", "document.execCommand('copy')")}} call.</p>

<h2 id="General_info">General info</h2>

<dl>
 <dt style="clear: left; float: left; text-align: right; width: 120px;">Specification</dt>
 <dd style="margin: 0 0 0 120px;"><a class="external" href="https://www.w3.org/TR/clipboard-apis/#the-copy-action">Clipboard</a></dd>
 <dt style="clear: left; float: left; text-align: right; width: 120px;">Interface</dt>
 <dd style="margin: 0 0 0 120px;">{{domxref("ClipboardEvent")}}</dd>
 <dt style="clear: left; float: left; text-align: right; width: 120px;">Bubbles</dt>
 <dd style="margin: 0 0 0 120px;">Yes</dd>
 <dt style="clear: left; float: left; text-align: right; width: 120px;">Cancelable</dt>
 <dd style="margin: 0 0 0 120px;">Yes</dd>
 <dt style="clear: left; float: left; text-align: right; width: 120px;">Target</dt>
 <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}: the focused element (for {{domxref("HTMLElement.contentEditable", "contentEditable")}}&nbsp;elements - the element containing the start of the selection), or the {{HTMLElement("body")}} element.</dd>
 <dt style="clear: left; float: left; text-align: right; width: 120px;">Default Action</dt>
 <dd style="margin: 0 0 0 120px;">See below.</dd>
</dl>

<p>A handler for this event can modify the provided {{domxref("ClipboardEvent.clipboardData")}} object by calling {{domxref("DataTransfer.setData", "setData(format, data)")}}:</p>

<pre class="javascript">
document.addEventListener('copy', function(e){
    e.clipboardData.setData('text/plain', 'Hello, world!');
    e.clipboardData.setData('text/html', '&lt;b&gt;Hello, world!&lt;/b&gt;');
    e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard
});</pre>

<p>A handler for this event cannot read the clipboard data using {{domxref("DataTransfer.getData", "clipboardData.getData()")}}.</p>

<p>The event's default action depends on the source of the event and the handler's behavior:</p>

<ul>
 <li>A <a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">synthetic</a> copy event does not have a default action; otherwise</li>
 <li>If the event was not cancelled: copies the selection (if any) to the clipboard;</li>
 <li>If a handler cancelled the event and called <code>setData()</code>: copies the contents of <code>clipboardData</code> to the clipboard;</li>
 <li>If a handler cancelled the event without calling <code>setData()</code>: no action.</li>
</ul>

<h2 id="Properties">Properties</h2>

<p>{{OpenEventProperties()}}{{CloseEventProperties()}}</p>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td><code>clipboardData</code></td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatGeckoDesktop(22) }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE&nbsp;Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td><code>clipboardData</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile(22) }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Related_events">Related events</h2>

<ul>
 <li>Copy-related events: {{CopyRelatedEvents()}}</li>
</ul>