All geek questions in one place

Copy text to clipboard using Zero Clipboard in asp.net

I'm trying to use Zero * Clipboard * to copy text from a Text box to the Clipboard when a client clicks a button . I have been trying this for many days, but have no luck making this work.

In the script, I have one Text field that displays data from the Database . I have one button that, when clicked, should copy the text to the text field . I tried but did not work.

Some help would be appreciated.

<script type="text/javascript" src="/Scripts/ZeroClipboard.js"></script> <script type="text/javascript"> ZeroClipboard.setMoviePath('/Scripts/ZeroClipboard.swf'); </script> <script> function test() { ZeroClipboard.setMoviePath('/Scripts/ZeroClipboard.swf'); //create client var clip = new ZeroClipboard.Client(); //event clip.addEventListener('mousedown', function () { clip.setText(document.getElementById('TextBox2').value); }); clip.addEventListener('complete', function (client, text) { alert('copied: ' + text); }); //glue it to the button clip.glue('d_clip_button'); } </script> <asp:TextBox ID="TextBox2" runat="server" BorderStyle="None" Enabled="False" Font-Size="Medium" ForeColor="Black" Width="213px"></asp:TextBox> &nbsp;<asp:Button ID="d_clip_button" runat="server" Text="Copy" OnClientClick="javascript:test();" />
+6
source share
3 answers
 <html> <body> <button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me."> Copy to Clipboard</button> <script src="ZeroClipboard.js"></script> <script src="main.js"></script> </body> </html> //In Main.js file // main.js var clip = new ZeroClipboard( document.getElementById("copy-button"), { moviePath: "/path/to/ZeroClipboard.swf" } ); clip.on( 'load', function(client) { // alert( "movie is loaded" ); } ); clip.on( 'complete', function(client, args) { this.style.display = 'none'; // "this" is the element that was clicked alert("Copied text to clipboard: " + args.text ); } ); clip.on( 'mouseover', function(client) { // alert("mouse over"); } ); clip.on( 'mouseout', function(client) { // alert("mouse out"); } ); clip.on( 'mousedown', function(client) { // alert("mouse down"); } ); clip.on( 'mouseup', function(client) { // alert("mouse up"); } );
+4
source 
 <html> <body> <script type="text/javascript" src="ZeroClipboard.js"></script> <div id="d_clip_button" style="border:1px solid black; padding:20px;">Copy To Clipboard</div> <script language="JavaScript"> var clip = new ZeroClipboard.Client(); var myTextToCopy = "Hi, this is the text to copy!"; clip.setText( myTextToCopy ); clip.glue( 'd_clip_button' ); </script> </body> </html>
+3
source

First of all, you are trying to select an item by the wrong identifier. Since you are using web forms, the correct way is:

 getElementById('<%=TextBox2.ClientID%>')

Also, after the unobtrusive js style, a good solution might look like this:

 $().ready(function () { ZeroClipboard.setDefaults({ moviePath: "/Scripts/ZeroClipboard.swf" }); var clip = new ZeroClipboard(document.getElementById('YourButtonId')); //or '<%=YourButton.ClientID%>' if you use asp.net button clip.on('complete', function (client, args) { alert("Copied text to clipboard: " + args.text); }); });

Your button should also have a data-clipboard-target data attribute (there are actually three ways to do this). Setting data attributes for managing web forms is complicated, so you can not use the asp.net button here and do it like this:

 <input type="button" value="clickme" id="YourButtonId" data-clipboard-target="<%=TextBox2.ClientID %>"/>

Enjoy it!

+2
source

Source: https://habr.com/ru/post/948516/

More articles:


All Articles