Using the Clipboard

ClipboardData lets you access the data on the Clipboard. You can:

• Use and modify the data cut or copied to the clipboard
• Use and modify data pasted from the clipboard.

It can be used in Input, Textarea and Textbox controls in all frameworks. It controlled by the oncopy, oncut and onpaste events. The information about the clipboard is passed as a parameter to these events.

Pasting

Let’s start by look at what happens when you paste. Here’s some code:

Function Input2_onpaste(event)
  clipboardData = event.clipboardData
  tobePasted = clipboardData.getData("text/plain")
  Input2.value = tobePasted & " was pasted"
  event.preventDefault()
End Function

In JavaScript,

Input2.onpaste = function(event) {
    clipboardData = event.clipboardData;
    tobePasted = clipboardData.getData("text/plain");
    Input2.value = tobePasted + " was pasted";
    event.preventDefault();
};

The above code intercepts the text to be pasted, adds ” was pasted” to the end of it, and puts it into the field. Let’s look at it in detail:

clipboardData = event.clipboardData The information about the paste is in clipboardData. We put it into a local variable to make it simpler to work with.

tobePasted = clipboardData.getData("text/plain") The getData function returns what is actually on the clipboard. We have to give the data type so it knows how to handle it. You can use “text/plain” for plain text, “text/html” for html.

event.preventDefault() We’re overriding the default action, by putting the value into the input field ourselves. This statement stops the default action from happening (and wiping out what we’ve done.)

Copying and Cutting

Copying and Cutting are similar to pasting. Here’s some code:

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)
  event.preventDefault()
End Function

In 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);
    event.preventDefault();
};

The above code takes the selected text in the input field, converts it to upper case, and puts it on the Clipboard. It’s very much the same as Paste, but uses setData instead of getData.

Copying and Pasting through code

The above code is triggered by the user doing a copy or paste operation. Is it possible to access the Clipboard purely from code, with the user clicking on copy or paste?

There’s a function to do this: document.execCommand(command)

This function works on most browsers.

Input1.select();
document.execCommand("Copy");

However, implementation is inconsistent. Safari implements “Paste”, but Chrome does not. Desktop browsers may work differently from device browsers. You can see the latest information on implementation here.

Have a look at the Clipboard sample – it installs with AppStudio.