ClipboardData: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
Line 85: Line 85:


     NSB.MsgBox("Selected text:" + selectedText + '\n' + "Changed to:" + modifiedText);
     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);
};
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);
};
};



Revision as of 19:48, 26 January 2017

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 (Basic)

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

Example (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");
};

Output