|
|
(7 intermediate revisions by the same user not shown) |
Line 8: |
Line 8: |
| ClipboardData lets you access the data on the clipboard. You can modify the data cut or copied to the clipboard, as well as data pasted from the clipboard. It can be used in Input, Textarea and Textbox controls in all frameworks. It is available in the event object passed to the oncopy, oncut and onpaste events. | | ClipboardData lets you access the data on the clipboard. You can modify the data cut or copied to the clipboard, as well as data pasted from the clipboard. It can be used in Input, Textarea and Textbox controls in all frameworks. It is available in the event object passed to the oncopy, oncut and onpaste events. |
|
| |
|
| Implementation of clipboard data is uneven across browsers. The examples here should work on all browser. There are additional features which only work on some browsers. To see the current status of Clipboard API support on all browsers, see http://caniuse.com/#search=clipboard%20API | | Implementation of clipboard data is uneven across browsers. The examples here should work on all browsers. There are additional features which only work on some browsers. To see the current status of Clipboard API support on all browsers, see http://caniuse.com/#search=clipboard%20API |
|
| |
|
| The full specification of the Clipboard API is at https://www.w3.org/TR/clipboard-apis/ | | The full specification of the Clipboard API is at https://www.w3.org/TR/clipboard-apis/ |
Line 17: |
Line 17: |
| {| class="wikitable" | | {| class="wikitable" |
| |- | | |- |
| | getData(''type'') || Gets the clipboard data for ''type''. ''type'' is usually "text/plain". The complete list of type is [https://w3c.github.io/clipboard-apis/#mandatory-data-types here]. | | | getData(''type'') || Gets the clipboard data for ''type''. ''type'' is usually "text/plain" or "text/html". The complete list of types is [https://w3c.github.io/clipboard-apis/#mandatory-data-types here]. |
| |- | | |- |
| | setData(''type'', value) || Put ''value'' on the clipboard with type of ''type''. | | | setData(''type'', value) || Put ''value'' on the clipboard with type of ''type''. |
Line 23: |
Line 23: |
| | oncopy(''event'') || Called when the user copies from an input field. | | | oncopy(''event'') || Called when the user copies from an input field. |
| |- | | |- |
| | getData(''event'') || Called when the user cuts from an input field. | | | oncut(''event'') || Called when the user cuts from an input field. |
| |- | | |- |
| | getData(''event'') || Called when the user pastes to an input field. | | | onpaste(''event'') || Called when the user pastes to an input field. |
| |} | | |} |
|
| |
|
| == Example (Basic) == | | == Example == |
| <pre> | | |
| | <tabber> |
| | JavaScript= |
| | <syntaxhighlight lang="JavaScript"> |
| | Input1.oncopy = function(event) { |
| | length = Input1.selectionEnd - Input1.selectionStart; |
| | selectedText = Mid(Input1.value, Input1.selectionStart + 1, length); |
| | modifiedText = UCase(selectedText); |
| | |
| | clipboardData = event.clipboardData; |
| | clipboardData.setData("text/plain", modifiedText); |
| | //Stop the default copy from the field. |
| | event.preventDefault(); |
| | |
| | NSB.MsgBox("Selected text:" + selectedText + '\n' + "Changed to:" + modifiedText); |
| | }; |
| | |
| | Input2.onpaste = function(event) { |
| | clipboardData = event.clipboardData; |
| | tobePasted = clipboardData.getData("text/plain"); |
| | Input2.value = tobePasted + " was pasted"; |
| | //Stop the default paste to the field. |
| | event.preventDefault(); |
| | |
| | NSB.MsgBox("Pasted text:" + tobePasted + '\n' + "Change to:" + Input2.value); |
| | }; |
| | |
| | Textarea1.onpaste = function(event) { //Paste as HTML |
| | clipboardData = event.clipboardData; |
| | tobePasted = clipboardData.getData("text/html"); |
| | Textarea1.innerHTML = tobePasted + " was pasted"; |
| | //Stop the default paste to the field. |
| | event.preventDefault(); |
| | |
| | NSB.MsgBox("Pasted text:" + tobePasted + '\n' + "Change to:" + Input2.value); |
| | }; |
| | |
| | btnCopy.onclick = function() { |
| | //execCommand does not work on all browsers and platforms |
| | Input1.select(); |
| | document.execCommand("Copy"); |
| | };</syntaxhighlight> |
| | |-| |
| | BASIC= |
| | <syntaxhighlight lang="vb.net"> |
| Function Input1_oncopy(event) | | Function Input1_oncopy(event) |
| length = Input1.selectionEnd - Input1.selectionStart | | length = Input1.selectionEnd - Input1.selectionStart |
Line 48: |
Line 92: |
| tobePasted = clipboardData.getData("text/plain") | | tobePasted = clipboardData.getData("text/plain") |
| Input2.value = tobePasted & " was pasted" | | Input2.value = tobePasted & " was pasted" |
| | 'Stop the default paste to the field. |
| | event.preventDefault() |
| | |
| | MsgBox "Pasted text:" & tobePasted & vbCRLF & "Change to:" & Input2.value |
| | End Function |
| | |
| | Function Textarea1_onpaste(event) 'Paste as HTML |
| | clipboardData = event.clipboardData; |
| | tobePasted = clipboardData.getData("text/html") |
| | Textarea1.innerHTML = tobePasted & " was pasted" |
| 'Stop the default paste to the field. | | 'Stop the default paste to the field. |
| event.preventDefault() | | event.preventDefault() |
Line 58: |
Line 112: |
| Input1.select() | | Input1.select() |
| document.execCommand("Copy") | | document.execCommand("Copy") |
| End Function | | End Function</syntaxhighlight> |
| | | </tabber> |
| </pre> | |
| | |
| == Example (JavaScript) ==
| |
| <pre>
| |
| Input1.oncopy = function(event) {
| |
| length = Input1.selectionEnd - Input1.selectionStart;
| |
| selectedText = Mid(Input1.value, Input1.selectionStart + 1, length);
| |
| modifiedText = UCase(selectedText);
| |
| | |
| clipboardData = event.clipboardData;
| |
| clipboardData.setData("text/plain", modifiedText);
| |
| //Stop the default copy from the field.
| |
| event.preventDefault();
| |
| | |
| NSB.MsgBox("Selected text:" + selectedText + '\n' + "Changed to:" + modifiedText);
| |
| };
| |
| | |
| Input2.onpaste = function(event) {
| |
| clipboardData = event.clipboardData;
| |
| tobePasted = clipboardData.getData("text/plain");
| |
| Input2.value = tobePasted + " was pasted";
| |
| //Stop the default paste to the field.
| |
| event.preventDefault();
| |
| | |
| NSB.MsgBox("Pasted text:" + tobePasted + '\n' + "Change to:" + Input2.value);
| |
| };
| |
| </pre> | |
|
| |
|
| == Output == | | == Output == |
event.clipboardData.getData(type)
event.clipboardData.setData(type, value)
Description
ClipboardData lets you access the data on the clipboard. You can modify the data cut or copied to the clipboard, as well as data pasted from the clipboard. It can be used in Input, Textarea and Textbox controls in all frameworks. It is available in the event object passed to the oncopy, oncut and onpaste events.
Implementation of clipboard data is uneven across browsers. The examples here should work on all browsers. There are additional features which only work on some browsers. To see the current status of Clipboard API support on all browsers, see http://caniuse.com/#search=clipboard%20API
The full specification of the Clipboard API is at https://www.w3.org/TR/clipboard-apis/
Properties and Methods
The following properties and events are supported, plus:
getData(type) |
Gets the clipboard data for type. type is usually "text/plain" or "text/html". The complete list of types is here.
|
setData(type, value) |
Put value on the clipboard with type of type.
|
oncopy(event) |
Called when the user copies from an input field.
|
oncut(event) |
Called when the user cuts from an input field.
|
onpaste(event) |
Called when the user pastes to an input field.
|
Example
Input1.oncopy = function(event) {
length = Input1.selectionEnd - Input1.selectionStart;
selectedText = Mid(Input1.value, Input1.selectionStart + 1, length);
modifiedText = UCase(selectedText);
clipboardData = event.clipboardData;
clipboardData.setData("text/plain", modifiedText);
//Stop the default copy from the field.
event.preventDefault();
NSB.MsgBox("Selected text:" + selectedText + '\n' + "Changed to:" + modifiedText);
};
Input2.onpaste = function(event) {
clipboardData = event.clipboardData;
tobePasted = clipboardData.getData("text/plain");
Input2.value = tobePasted + " was pasted";
//Stop the default paste to the field.
event.preventDefault();
NSB.MsgBox("Pasted text:" + tobePasted + '\n' + "Change to:" + Input2.value);
};
Textarea1.onpaste = function(event) { //Paste as HTML
clipboardData = event.clipboardData;
tobePasted = clipboardData.getData("text/html");
Textarea1.innerHTML = tobePasted + " was pasted";
//Stop the default paste to the field.
event.preventDefault();
NSB.MsgBox("Pasted text:" + tobePasted + '\n' + "Change to:" + Input2.value);
};
btnCopy.onclick = function() {
//execCommand does not work on all browsers and platforms
Input1.select();
document.execCommand("Copy");
};
Function Input1_oncopy(event)
length = Input1.selectionEnd - Input1.selectionStart
selectedText = Mid(Input1.value, Input1.selectionStart+1, length)
modifiedText = UCase(selectedText)
clipboardData = event.clipboardData;
clipboardData.setData("text/plain", modifiedText)
'Stop the default copy from the field.
event.preventDefault()
MsgBox "Selected text:" & selectedText & vbCRLF & "Changed to:" & modifiedText
End Function
Function Input2_onpaste(event)
clipboardData = event.clipboardData;
tobePasted = clipboardData.getData("text/plain")
Input2.value = tobePasted & " was pasted"
'Stop the default paste to the field.
event.preventDefault()
MsgBox "Pasted text:" & tobePasted & vbCRLF & "Change to:" & Input2.value
End Function
Function Textarea1_onpaste(event) 'Paste as HTML
clipboardData = event.clipboardData;
tobePasted = clipboardData.getData("text/html")
Textarea1.innerHTML = tobePasted & " was pasted"
'Stop the default paste to the field.
event.preventDefault()
MsgBox "Pasted text:" & tobePasted & vbCRLF & "Change to:" & Input2.value
End Function
Function btnCopy_onclick()
'execCommand does not work on all browsers and platforms
Input1.select()
document.execCommand("Copy")
End Function
Output