This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

getData

Summary

Gets the data in the specified format from the clipboard through the DataTransfer object or the ClipboardData object. If there is no data, returns an empty string.

Method of dom/DataTransferdom/DataTransfer

Syntax

var eventData = event.dataTransfer.getData(format);

Parameters

format

Data-type
String

The format of the data to be transferred, using one of the following values (case insensitve):

  • URL
  • Text

Return Value

Returns an object of type StringString

Returns the data in the format retrieved from the clipboard/drag and drop operation through the DataTransfer object or the ClipboardData object. Depending on the information contained in setData, this variable can get a path to an image, text, or an anchor URL.

Examples

This example uses the getData method and the setData method with the DataTransfer object to create a shortcut to an image.

<!doctype html>
<html>
 <head>
  <script>
var sImageURL, oTarget, oImage;
function initiateDrag(e) {
/*  The setData parameters tell the source object
   to transfer data as a URL and provide the path.  */
  e.dataTransfer.setData("URL", oImage.src);
}
function finishDrag(e) {
/*  The parameter passed to getData tells the target
    object what data format to expect.  */
  sImageURL = e.dataTransfer.getData("URL");
  oTarget.textContent = sImageURL;
}
function initialize() {
 oImage = document.getElementById("oImage");
 oTarget = document.getElementbyId("oTarget");
 oImage.addEventListener("dragstart", initiateDrag, false);
 oTarget.addEventListener("dragenter", finishDrag, false);
}
window.addEventListener("load", initialize, false);
  </script>
 </head>
 <body>
  <p>This example demonstrates how to use the setData and getData methods of the dataTransfer object to enable the source path of the image to be dragged.</p>
  <img id="oImage" src="/workshop/graphics/black.png" width="20" height="20" alt="Black">
  <span id="oTarget">
    Drop the image here
  </span>
 </body>
</html>

View live example

Notes

  • The getData method enforces cross-frame security and allows data transfers only in the same domain. To the user, this means that a selection that is dragged between different security protocols, such as HTTP and HTTPS, fails. In addition, that a selection that is dragged between two instances of the application with different security levels, where the first instance is set to medium and the second is set to high, fails. Finally, that a selection that is dragged into the application from another drag-enabled application, such as Microsoft Word, also fails.
  • To use the getData method to get data from the clipboard in the oncopy event or the oncut event, you must call event.preventDefault() in the event handler script.

Related specifications

HTML5
Candidate Recommendation

Attributions