beforecopy | onbeforecopy event
Fires on the source object before the selection is copied to the system clipboard.
Syntax
| HTML Attribute | <element onbeforecopy = "handler(event)"> |
|---|---|
| Event Property | object.onbeforecopy = handler; |
| attachEvent Method | object.attachEvent("onbeforecopy", handler) |
| addEventListener Method | object.addEventListener("beforecopy", handler, useCapture) |
Event information
| Synchronous | No |
|---|---|
| Bubbles | Yes |
| Cancelable | Yes |
Event handler parameters
- pEvtObj [in]
-
Type: IHTMLEventObj
Standards information
There are no standards that apply here.
Remarks
The onbeforecopy event fires on the source element. Use the setData method to specify a data format for the selection.
None.
To invoke this event, do one of the following:
- Right-click to display the shortcut menu and select Copy.
- Or press CTRL+C.
The pEvtObj parameter is required for the following interfaces:
- HTMLAnchorEvents2
- HTMLAreaEvents2
- HTMLButtonElementEvents2
- HTMLControlElementEvents2
- HTMLDocumentEvents2
- HTMLElementEvents2
- HTMLFormElementEvents2
- HTMLImgEvents2
- HTMLFrameSiteEvents2
- HTMLInputFileElementEvents2
- HTMLInputImageEvents2
- HTMLInputTextElementEvents2
- HTMLLabelEvents2
- HTMLLinkElementEvents2
- HTMLMapEvents2
- HTMLMarqueeElementEvents2
- HTMLObjectElementEvents2
- HTMLOptionButtonElementEvents2
- HTMLScriptEvents2
- HTMLSelectElementEvents2
- HTMLStyleElementEvents2
- HTMLTableEvents2
- HTMLTextContainerEvents2
- HTMLWindowEvents2
Examples
This example uses the oncopy event to customize copy behavior (and demonstrates the use of beforecopy).
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/onbeforecopyEX.htm
<!DOCTYPE html>
<html>
<head>
<title>Example of the onbeforecopy Event</title>
</head>
<body>
<h1>Example of the onbeforecopy Event</h1>
<p>Steps to demonstrate the <strong>onbeforecopy</strong> event:</p>
<ol>
<li>Select the magenta text.</li>
<li>Right-click the mouse and choose Copy from the shortcut menu.</li>
<li>Switch focus to the text box, and then choose Paste from the shortcut menu.</li>
</ol>
<p>
The <strong>copy</strong> event is useful for customizing copy behavior. In the example, canceling the default action of
<strong>copy</strong> allows the developer to handle the data transfer. If the default action is not canceled, the text,
"copy this text," will be pasted into the text box. If the default action is canceled, then the text,
"<strong>copy</strong> event fired," will be pasted there instead.
</p>
<div id="oSource" style="color: magenta; font-size: 24pt">copy this text</div>
<p><input id="oTarget" /></p>
<script>
document.getElementById('oSource').addEventListener('beforecopy', Source_Beforecopy, false);
document.getElementById('oSource').addEventListener('copy', Source_Copy, false);
document.getElementById('oTarget').addEventListener('beforepaste', Target_BeforePaste, false);
document.getElementById('oTarget').addEventListener('paste', Target_Paste, false);
function Source_Beforecopy(evt) {
console.log("Source_Beforecopy() fired, and evt.target.textContent = " + '"' + evt.target.textContent + '"');
}
function Source_Copy(evt) {
console.log("Source_Copy() fired, and window.clipboardData.getData('text') = " + '"' + window.clipboardData.getData('text') + '"');
window.clipboardData.setData('text', "copy event fired");
evt.preventDefault(); // Does not allow the default behavior which is to place "copy this text" into the clipboard. Instead, the clipboard receives "copy event fired". Comment this line out to see the difference in behavior.
}
function Target_BeforePaste(evt) {
console.log("Target_BeforePaste() fired, and window.clipboardData.getData('text') = " + '"' + window.clipboardData.getData('text') + '"');
}
function Target_Paste(evt) {
console.log("Target_Paste() fired, and window.clipboardData.getData('text') = " + '"' + window.clipboardData.getData('text') + '"');
document.getElementById('oTarget').textContent = window.clipboardData.getData('text');
}
</script>
</body>
</html>
See also
- a
- abbr
- acronym
- address
- applet
- area
- b
- base
- baseFont
- bdo
- bgSound
- big
- blockQuote
- body
- br
- button
- caption
- center
- cite
- code
- col
- colGroup
- comment
- custom
- dd
- del
- dfn
- dir
- div
- dl
- dt
- em
- embed
- fieldSet
- font
- form
- frame
- frameSet
- head
- hn
- hr
- html
- i
- iframe
- img
- input type=button
- input type=checkbox
- input type=email
- input type=file
- input type=hidden
- input type=image
- input type=number
- input type=password
- input type=radio
- input type=range
- input type=reset
- input type=search
- input type=submit
- input type=tel
- input type=text
- input type=url
- ins
- isIndex
- kbd
- label
- legend
- li
- link
- listing
- map
- marquee
- menu
- nextID
- noBR
- noFrames
- noScript
- object
- ol
- option
- p
- plainText
- pre
- q
- rt
- ruby
- s
- samp
- script
- select
- small
- span
- strike
- strong
- sub
- sup
- table
- tBody
- td
- textArea
- tFoot
- th
- tHead
- title
- tr
- tt
- u
- ul
- var
- wbr
- xml
- xmp
- Reference
- onbeforecut
- onbeforepaste
- oncopy
- oncut
- onpaste
- setData
- Conceptual
- About DHTML Data Transfer