The Clipboard hack - Access the clipboard data with JavaScript

E-mail Print PDF

The Clipboard hack - Access the clipboard data with JavaScript

The clipboard is a set of functions and messages that enable applications to transfer data. Because all applications have access to the clipboard, data can be easily transferred between applications or within an application.

The clipboard is a software facility that can be used for short-term data storage and/or data transfer between documents or applications, via copy and paste operations. It is most commonly a part of a GUI environment and is usually implemented as an anonymous, temporary block of memory that can be accessed from most or all programs within the environment via defined programming interfaces. A typical application accesses clipboard functionality by mapping user input (key bindings, menu selections, etc.) to these interfaces.

We can access the clipboard data with JavaScript; a small piece of code will do it for you. Work best with IE, Not work with Crome

Copy some text before test the demo. Select some text and Press ctrl+c

<script language="javascript" type="text/javascript">
<!--
function clipboardHack () {
var content = clipboardData.getData("Text");
alert(content);
// End -->
}
</script>

Now with the onClick event just call the clipboardHack() function which will access the clipboard data with The JavaScript clipboardData object. Implementation of script is quite simple just copy it and paste it any where in <head>--</head> section or <body>--</body>section of your webpage. Here is the complete implementation of the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>The Clipboard hack - Access the clipboard data with JavaScript</title>
</head>
<body>
<script language="javascript" type="text/javascript">
<!--
function clipboardHack () {
var content = clipboardData.getData("Text");
alert(content);
// End -->
}
</script>
<form name="frmTest" id="frmTest" method="post">
<input type="button" title="Show me ClipBoard Data" value="Show me ClipBoard Data" onclick="clipboardHack();">
</form>
</body>
</html>

How "Access the clipboard data with JavaScript" script work

To access the clipboard data, we have define a JavaScript function clipboardHack() and used JavaScript clipboardData object. The JavaScript clipboardData object can be accessible as a property of a window or frame object. The JavaScript clipboardData object is a temporary container that can use to transfer text data, particularly during script-controlled operations that simulate cutting, copying, and pasting, or that control dragging. Your script controls what data is stored in the clipboardData object. Here we have used getData( ) Returns a copy of data from the clipboardData object.

The JavaScript clipboardData object supports three methods are clearData( ), getData( ), setData( ).

clearData([dataFormat]) - Removes data from the clipboardData object.
getData(dataFormat) - Returns a copy of data from the clipboardData object.
setData(dataFormat, stringData) - Stores string data in the clipboardData object. Returns Boolean true if the assignment is successful
 
The dataFormat is an optional string specifying a single format for the data to be removed. The only reliable format is Text.
The stringData is referring to any string value, including strings that contain HTML tags.

 

Trackback(0)
Comments (0)Add Comment

Write comment
quote
bold
italicize
underline
strike
url
image
quote
quote
smile
wink
laugh
grin
angry
sad
shocked
cool
tongue
kiss
cry
smaller | bigger

busy
 

Who's Online

We have 15 guests online

Subscribe Feeds

Enter your email address:

Sponsor Adds


 
 

Submit Article

We want to develop such a Community portal which will provide a good resource on latest hot technologies such as .NET, VB.NET, C#.NET, ADO.NET, ASP.NET, PHP, Flash, Photoshop. If you like to write for us, this guideline for you. please send your article, faqs on admin[at]xfunda.com

Adobe Gallery Photoshop Tutorials...

Photoshop Tutorial - Create Colorful Composition in Photoshop Photoshop Tutorial - Create Colorful Composition in Photoshop Photoshop Tutorial - Create Colorful Composition in Photoshop Category - Photoshop >> illustration and Art. ...
 
Photoshop Tutorial - Create a Nice Autumn Scenery in Photoshop Photoshop Tutorial - Create a Nice Autumn Scenery in Photoshop Photoshop Tutorial - Create a Nice Autumn Scenery in Photoshop Category - Photoshop >> illustration and Art. ...
 
Photoshop Tutorial - Create a Beautiful Lonely Fantasy Fairy Photoshop Tutorial - Create a Beautiful Lonely Fantasy Fairy Photoshop Tutorial - Create a Beautiful Lonely Fantasy Fairy Category - Photoshop >> illustration and Art. ...
 
Photoshop Tutorial - How To Create a Futuristic Sci-Fi Scene Photoshop Tutorial - How To Create a Futuristic Sci-Fi Scene Photoshop Tutorial - How To Create a Futuristic Sci-Fi Scene Category - Photoshop >> Photo Effects. ...
 
Photoshop Tutorial - Goddess cadeira photo effect in Photoshop Photoshop Tutorial - Goddess cadeira photo effect in Photoshop Photoshop Tutorial - Goddess cadeira photo effect in Photoshop Category - Photoshop >> Photo Effects. ...