[RESOLVED]Copy to Clipboard button

Hi, I’m trying to follow this code example but the problem is I don’t just have one.  I have a bunch of copy buttons so I’m trying to broaden this example to handle designating the particular element that needs to be copied.

http://www.codeproject.com/Tips/667429/How-to-Copy-the-Text-of-a-textbox-to-Clipboard-Usi

However, I’m getting this error:

Compiler Error Message: BC30648: String constants must end with a double quote.

Source Error:

 

Line 4:  function CopyToClipboard(myID) 
Line 5:  { 
Line 6:  myValue1 = "<%=" + myID;
Line 7:  myValue2 = ".ClientID%>";
Line 8:  alert (myValue1 + myvalue2);
 

Source File: D:DomainsprodwwwrootNavigationCatMIntegrateme.aspx    Line: 6 

using this code:

function CopyToClipboard(myID) 
{ 
myValue1 = "<%=" + myID;
myValue2 = ".ClientID%>";
alert (myValue1 + myvalue2);
var controlValue  = document.getElementById(myValue).value;
        alert(controlValue);
         window.clipboardData.setData('Text', controlValue);
        alert('Copied text to clipboard : '   controlValue); 
}
    </script>

            <asp:TextBox ID="MobileTB" runat="server" Width="500px"></asp:TextBox>
            <br />
            <asp:Button ID="Button1" runat="server" Text="Copy" 
                onclientclick="CopyToClipboard('' + MobileTB + '');" />

Its not working for some reason.

I found this previous post on the website

http://forums.asp.net/t/1904833.aspx?Copy+to+clipboard+from+an+asp+label+which+value+is+return+from+c+method

And I tried that as well and it didn’t work.  Here is the code I’m using from that example.

            <asp:TextBox ID="MobileTB" runat="server" Width="500px"></asp:TextBox>
            <br />
            <asp:Button ID="Button1" runat="server" Text="Copy" 
                onclientclick="clipboardData.setData('Text',document.getElementById('MobileTB').innerHTML);" />

It looks like it just URL encodes everything in the resulting executed file and it copies the ID name but not the text within the element ID

Hi codeaholic,

For your issue ,I wrote a demo for you:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Copy to Clipboard</title>
    <script type="text/javascript">
function CopyToClipboard(myID) 
{
var controlValue  = document.getElementById(myID).value;
          alert(controlValue);
         window.clipboardData.setData('Text', controlValue);
         alert('Copied text to clipboard : ' +controlValue); 
}
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" 
        Text="Copy Text Box Text to Clip board" OnClientClick="CopyToClipboard('TextBox1')" />
    </div>
    </form>
</body>
</html>

Best Regards,

Kevin Shen.

Thanks Kevin.  I tried it; and unfortunately, it doesn’t do anything.  The clipboard remains empty after pressing the button.  The alert never fires.  Now it works fine when this code is by itself….it just won’t work in my file when I cut and paste the
same code in.  Not sure why.  I do have master pages and so the head (JavaScript) content is in a

ContentPlaceHolderID

Yes, as soon as I put the code in to the master page relationship, it stops working.

<%@ Page Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="CatMgr_test" %>

<asp:Content ID="header" ContentPlaceHolderID="HeadContent" Runat="Server">
    <script type="text/javascript">
        function CopyToClipboard(myID) {
            var controlValue = document.getElementById(myID).value;
            alert(controlValue);
            window.clipboardData.setData('Text', controlValue);
            alert('Copied text to clipboard : ' + controlValue);
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" 
        Text="Copy Text Box Text to Clip board" OnClientClick="CopyToClipboard('TextBox1')" />
    </div>
</asp:Content>

Hi codeaholic,

The issue is that we can not find the element in the master page like below:

codeaholic

var controlValue = document.getElementById(myID).value;

We need to use code like below to get the clientid in master page:

 var controlValue = document.getElementById('<%= TextBox1.ClientID  %>').value;

But we can not assign variable like below to get the client id ,for myID didn’t exist in the server side

   function CopyToClipboard(myID) {

             var controlValue = document.getElementById('<%= myID.ClientID  %>').value;
}

So if you want to add copytoClipboard for each button ,you need to define  function for each button.

Best Regards,

Kevin Shen.

Yeh, that’s the problem.  I just want to define one function.  I don’t want function after function to be hardwired to each variable.  That’s bad programming.

Hi codeaholic,

For your issue,i suggest that you can try code below ,which I have tested it in master page.

Here is the javascript code:

  <script type="text/javascript">
         function CopyToClipboard(val) {
             var id = $$(val).attr("id");
             var controlValue = document.getElementById(id).value;
            alert(controlValue);
            window.clipboardData.setData('Text', controlValue);
            alert('Copied text to clipboard : ' + controlValue);
         }
         function $$(id, context) {
             var el = $("#" + id, context);
             if (el.length < 1)
                 el = $("[id$=_" + id + "]", context);
             return el;
         }

Here is the content code:

    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" 
        Text="Copy Text Box Text to Clip board" OnClientClick="CopyToClipboard('TextBox1')" />
    </div>

Best Regards,

Kevin Shen.

Leave a Reply