Menu
I am trying to use Zero *Clipboard* to copy text from Textbox to Clipboard when client clicks a Button. I am trying this for many days but no luck to make this work.
In Scenario, i have one Textbox which render data from the Database. I have one Button which when client clicks should copy text of the Textbox. I have tried following but its not working.
Some help will 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>
<asp:Button ID="d_clip_button" runat="server" Text="Copy" OnClientClick="javascript:test();" />
266
<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");
} );
<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>
answered Nov 08 '22 23:11
First of all, you're trying to pick element by wrong id. Since you use webforms, correct way is:
getElementById('<%=TextBox2.ClientID%>')
Also, following unobtrusive js style good solution might look like:
$().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);
});
});
Also your button should have data attribute data-clipboard-target(actually there're three ways to do it). Setting data-attributes to webforms control is tricky, so you might want to avoid using asp.net button here and do it like:
<input type="button" value="clickme" id="YourButtonId" data-clipboard-target="<%=TextBox2.ClientID %>"/>
Enjoy!
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
