• Grumpy Wookie

  • Archives

  • Top Posts

  • Recent Visitors

  • Blog Stats

    • 346,280 hits

Copy To Clipboard -> JavaScript

Sometimes it can be useful to copy some text or a URL to the Windows Clipboard, allowing the web page user to paste the text elsewhere – such as a Word doc, or email, etc.

Sure – the user could highlight the text, and click CTRL+C, or right-click and select “copy” – but you might have a reason to do so from “code”.

It follows that this needs “client side” code – as opposed to “server side” code – which would be no use copying to the clipboard on the server !!

There is a JavaScript method (object reference) that allows you to do this.

window.clipboardData.setData(‘Text’, ‘This is some text’);

I’ve created a small JavaScript function that I can pass the control id, and copy the “value” to the clipboard :

  • Determine the “control” from the id value passed
  • If the control wasn’t found (null), then show error
  • Otherwise, grab the “value” – and set the clipboard text

function CopyToClipboard(controlId)
{
    var control = document.getElementById(controlId);

    if (control == null)
    {
        alert(‘ERROR – control not found – ‘ + controlId);
    }
    else
    {
        //determine the value of the control
        var controlValue = control.value;

        //copy to clipboard
        window.clipboardData.setData(‘Text’, controlValue);
        alert(‘Copied text to clipboard : ‘ + controlValue);
    }
}

The following example shows this using both HTML controls, and ASP.NET controls :

HTML

  • Input control (Textbox)
  • Input control (Button)…   OnClick, call the “CopyToClipboard” method

<div id=”HTMLControls”>
    <h1>HTML Text Box</h1>
    <input id=”HTMLTextBox” type=”text” />&nbsp;&nbsp;
    <input id=”HTMLButton” type=”button” value=”button” onclick=”CopyToClipboard(‘HTMLTextBox’);” /><p>
</div>

A better “example” might be to include a “copy” button next to a text panel, or something like a calculation, or contact details – whatever the scenario requires, really !

ASP.NET

The field controls are very much the same, but using “ASP” server side controls.

  • ASP.NET TextBox
  • ASP.NET Button

<div id=”ASPNETControls”>
    <h1>ASP.NET Text Box – client side CLICK</h1>
    <asp:TextBox ID=”ASPNETTextBox” runat=”server” />
    <asp:Button ID=”ASPNETButton” runat=”server” Text=”Click To Copy” />
</div>

Note that the “click” event is NOT specified above – there is a trick here, as the controls are actually “server side” – but we need the click event to run “client side”. 

For this, the “OnClientClick” event is used – rather than the “Click” event.  This means there WON’T be a PostBack event, and program code will run “client side”.

BUT – having said that – the best approach is to use some code behind to dynamically set the value for the “OnClientClick” event.

protected void Page_Load(object sender, EventArgs e)
{
    ASPNETButton.OnClientClick = “CopyToClipboard(‘” + ASPNETTextBox.ClientID + “‘);”;

}

This could probably be included in the HTML Design for the page – but there may be a need to have the dynamic ClientID value – as opposed to hard-coding the ASP.NET field name.

Here’s the page :

image

Just need to enter some text, and click the button – will then copy the text to the clipboard, and also display a message.

image

NB – you might see the following message when using Windows Vista :

image

Click here to see the full source code for the page (HTML) – and code behind (C#).

This function and HTML could then be used in a SharePoint WebPart, or an ASP.NET application of some kind.   Hope you can use it for your solution…

🙂

Advertisements

4 Responses

  1. Check this link…
    Copy to Clipboard

  2. This works only under IE.

  3. I am looking to make a switch that can switch on and off anything plugged into a 110vac 15amp wall plug. The switch will interrupt the smaller (hot) pin. I need to know if I need to use 14 gauge (15 amp) wire since it could be used for anything or can I get away with a smaller profile 16 gauge or 18 gauge wire>
    Thanks,

  4. Guy .. Excellent .. Wonderful .. I will bookmark your site and take the feeds alsoI am happy to seek out so many useful info right here in the submit, we want develop extra strategies in this regard, thanks for sharing. . . . . .

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: