Retrieve the origin of the copied text

Question

Retrieve the origin of the copied text

While working on a Vue application, I'm curious to know if it's possible to access the source of pasted text. For example, whether the pasted text originated from your own application, Word, or Notepad?

I attempted the code below but was unable to identify any information about the source in the event.

<textarea @paste="onPaste"></textarea>

methods: {
    onPaste(event){
        console.log(event)
    }
  }

javascript vue.js

Answer 1

Answer №1

Reproducing @freedomn-m's code snippet from the comments below:

To confirm whether it belongs to your own application, you can introduce an additional type while copying and then validate it upon pasting, for instance
e.clipboardData.setData('text/myapp', 'only my data allowed');
- most paste sources will simply disregard this.

While not providing absolute identification of the application, here are some instances on my system, PopOS.

Application	Outcome
Terminal(console)	['text/plain']
VsCode	["text/plain", "text/html","application/vnd.code.copymetadata", "vscode-editor-data"]
Chrome / Browser	["text/html", "text/plain"]
This particular section	["text/html", "text/plain", "text/myapp"]

Source code originally referenced from: w3c clipboard event API samples

// https://w3c.github.io/clipboard-apis/#clipboard-event-paste


// Altering the copied content in the clipboard.
document.addEventListener('copy', function(e) {
  // e.clipboardData is initially empty, but we can set it to the
  // data that we want copied onto the clipboard.
  e.clipboardData.setData('text/plain', 'Hello, world!');
  e.clipboardData.setData('text/html', '<b>Hello, world!</b>');
  e.clipboardData.setData('text/myapp', "it's a secret");

  // This prevents the current document selection from being written to the clipboard.
  e.preventDefault();
});

// Modifying the content being pasted from the clipboard.
document.addEventListener('paste', function(e) {
  // e.clipboardData contains the data that is about to be pasted.
  console.log(e.clipboardData.types)
  if (e.clipboardData.types.indexOf('text/html') > -1) {
    var oldData = e.clipboardData.getData('text/html');
    var newData = '<b>Ha Ha!</b> ' + oldData;

    // As we are canceling the paste operation, we must manually insert the data into the document.
    //pasteClipboardData(newData);

    // To avoid the default paste action, this is crucial.
    e.preventDefault();
  }
});

<input type='text'>

Please note: you should also address handling for "cut"

Answer 2

Reproducing @freedomn-m's code snippet from the comments below:

To confirm whether it belongs to your own application, you can introduce an additional type while copying and then validate it upon pasting, for instance
e.clipboardData.setData('text/myapp', 'only my data allowed');
- most paste sources will simply disregard this.

While not providing absolute identification of the application, here are some instances on my system, PopOS.

Application	Outcome
Terminal(console)	['text/plain']
VsCode	["text/plain", "text/html","application/vnd.code.copymetadata", "vscode-editor-data"]
Chrome / Browser	["text/html", "text/plain"]
This particular section	["text/html", "text/plain", "text/myapp"]

Source code originally referenced from: w3c clipboard event API samples

// https://w3c.github.io/clipboard-apis/#clipboard-event-paste


// Altering the copied content in the clipboard.
document.addEventListener('copy', function(e) {
  // e.clipboardData is initially empty, but we can set it to the
  // data that we want copied onto the clipboard.
  e.clipboardData.setData('text/plain', 'Hello, world!');
  e.clipboardData.setData('text/html', '<b>Hello, world!</b>');
  e.clipboardData.setData('text/myapp', "it's a secret");

  // This prevents the current document selection from being written to the clipboard.
  e.preventDefault();
});

// Modifying the content being pasted from the clipboard.
document.addEventListener('paste', function(e) {
  // e.clipboardData contains the data that is about to be pasted.
  console.log(e.clipboardData.types)
  if (e.clipboardData.types.indexOf('text/html') > -1) {
    var oldData = e.clipboardData.getData('text/html');
    var newData = '<b>Ha Ha!</b> ' + oldData;

    // As we are canceling the paste operation, we must manually insert the data into the document.
    //pasteClipboardData(newData);

    // To avoid the default paste action, this is crucial.
    e.preventDefault();
  }
});

<input type='text'>

Please note: you should also address handling for "cut"

Retrieve the origin of the copied text

Answer №1

Similar questions

Displaying a Facebook iframe on the left side of the page

having trouble parsing JSON data

How can I include a JSON object in an angularjs $scope variable?

Tips on preventing duplication of APIs when retrieving data using nextjs

When attempting to render a base64 string in an <img> tag using ReactJS, an error message ERR_INVALID_URL is displayed

Use jQuery to refresh the jQuery sparkline chart after fetching data asynchronously

Accessing variables within the controller's scope

including a content tag into an input field within a template

JavaScript Ping Pong Challenge

Can an HTML DOM object be converted to a JSON string using JSON.stringify in JavaScript?

Is there a way to utilize nodemon without having to install it through npm?

Position the previous and next buttons next to the thumbnail images

Updating the customer's billing address in Stripe without modifying their payment card details

Issue in VueJs where mutations do not properly save new objects to the state

The cursor remains positioned below the video within the designated div

How to create a transparent background on a canvas

Increasing the nth-child Selector in Jquery

Attempt to create a truncated text that spans two lines, with the truncation occurring at the beginning of the text

Alter the color of the text within the `<li>` element when it is clicked on

Looking to convert files like text or images into binary format using Node.js?