What is the clipboardData.getData() method for?

Question

I wonder what exactly this code does.

let text = e.clipboardData.getData('Text');

I’m using this method to paste function by Ctrl-v. The project itself is a calculator and this code makes me paste a number copied from elsewhere and stay exactly on my calculator display, improving user interactivity.

My code below:

pasteFromClipboard() {                                                                             
    document.addEventListener('paste', e => {
        let text = e.clipboardData.getData('Text');
        this.displayCalc = parseFloat(text);    
    });
}

I did some research on this method and I didn’t find much. I appreciate any information you can give me about it.

Answer 1

Look, there are some things you need to understand: Event is the event you are getting on your Arrow run... Basically, it contains all the data of a particular user event...

You can give a.log(e) console to understand what you receive at this specific event.

The second thing you need to understand is the addeventlistener, which adds a "listener" to a given event... In this case, you are listening to the "Paste", which is when the user does Ctrl v... In this specific event, he has an element in the event that is the clipboardData, where you can do several things, one of it is the getData...

In javascript everything is an object... you can give a console.log on certain objects to better understand them, for example:

pasteFromClipboard() {
    document.addEventListener('paste', e => {
        console.log(e);
        console.log(e.clipboardData);
        let text = e.clipboardData.getData('Text');
        this.displayCalc = parseFloat(text);
    }
  )
}

Answer 2

I recently read statements saying:

as you know can not copy or paste anything on top of a SVG ... e.clipboardData.getData('Text'), so this method managed to paste something in SVG

About this quote I want to highlight some problems of understanding:

• ClipboardData.getData() has existed since Internet Explorer 5.5, browser released in 2000
• SVG is only supported in Internet Explorer 9, browser released in 2011
• IE5.5 and IE9 are 11 years apart and the method ClipboardData.getData() existed before SVG support.

So there’s no reason why getData be an advantage for the SVG, the real "advantage" is to apply what is in the Clipboard user for an action customized as required by the project/application.

The use within the event paste is a mere example only, but could be used otherwise and in other events (such as copy, I quoted an example near the end of the answer).

It’s not like you can’t glue anything to SVG, just can’t stick anywhere that ISN’T:

• INPUT
• TEXTAREA
• And who doesn’t have the attribute contentEditable (or document with designmode, popularly called "richtext")

I mean, not even glue on one DIV you’ll get.

With ClipboardData.getData() it is possible to get the user’s Clipboard at an opportune time so that you can customize the action, as well as edit a DIV or SVG at runtime so that it presents the value that was in the Clipboard.

An example, assuming you have a richtext system (contentEditable or designMode), which allows the web to edit the HTML as if it were the microsoftword or similar program, you could prevent the user to insert improper things into the HTML, cleaning the contents of the obtained Clipboard, leaving only the tags allowed.

Another example would be in the event copy to check if the current value of the Clipboard already meets a need and prevents copying another, then to check the current value would have to use the getData also, this of course depending on the need of those developing the application.

The use and advantage of getData goes from the need of the environment and what you actually need, a method or function does not need to be created with such a specific purpose, the basic purpose of the getData is this, get the Clipboard, what you will do with it after this is of intent and need exclusively yours, so so many Apis (not only of Clipboard) allow "handlers" (handlers), so that the developer customizes the action according to a personal need.

---

An important detail is that although today’s method is functional in virtually all browsers, it was not something common except in IE, it was only changed over time, and as the implementation was based on IE for the others it is likely that this is the reason why it is flagged as experimental in some documentations.

Answer 3

According to the article on the MDN website, the method DataTransfer.getData() serves to obtain the pasted content in the clipboard. This means that in your code, this method will return the text you have pasted into your document.

See the example below so you can understand better:

const input = document.getElementById("inputField");

input.onpaste = (event) => {
    const div = document.getElementById("display");
    div.innerText = "Você colou o texto: " + event.clipboardData.getData("text");
}

<input id="inputField" placeholder="Cole um texto aqui"/>
<div id="display"></div>