All geek questions in one place

ZeroClipboard: software setText () not working

I'm trying to get the ZeroClipboard API to work, but it looks like the setText () function is not working.

A simple example: here <works fine, but when I want to programmatically call setText (), it doesn't work. Could you help me what is wrong with this code?

<html> <body> <script type="text/javascript" src="/resources/ZeroClipboard.js"></script> <button id="my-button">Copy to Clipboard</button> <script language="JavaScript"> ZeroClipboard.setDefaults({ moviePath: "/resources/ZeroClipboard.swf" }); var clip = new ZeroClipboard( $("button#my-button") ); clip.setText('This will be copied into the clipboard'); //this should be in my clipboard, but it is not... </script> </body> </html>

Thank you very much

+6
source share
1 answer

Due to security issues, flash memory cannot access the buffer unless the action is a click (or user interaction) with the flash.

Because of this, simply calling clip.setText will never work. Even calling it from a random button, the onclick handler will not work, since it is not a click on the flash object.

It is as it is.

So what ZeroClipboard does is “glue” or add an invisible flash element to the object of interest to you. When you click on an element, you do not run the usual javascript onclick for this element, you fire the onclick flash video event.

Hope this makes sense.

So, to “stick” ZeroClipboard to an element, you can do what you did, which is right, or you can call:

 clip.glue(element);

You can glue several elements without problems.

So, to set the text, the action must begin by clicking on the Flash object. There are three ways to do this, according to the documentation.

Using data-clipboard-text

You can set the “data-clipboard-text” attribute to any text you like, and it will be copied automatically.

for example, for your example (copy “copy this text!”):

 <button id="my-button" data-clipboard-text="copy this text!">Copy to Clipboard</button>

Using data-clipboard target

Or you can set "data-clipboard-target" to any id element, and ZeroClipboard will try to get this innerText element;

eg. (copies of "Copy to clipboard")

 <button id="my-button" data-clipboard-target="my-button">Copy to Clipboard</button>

Using the dataRequested Event

And finally, you can copy the text in the callback. If none of these attributes is set, then the dataRequested callback will be called, in which you can set the text as you want.

for example (copies of "Setting text in a callback ...")

 <html> <body> <script src="js/jquery-1.9.1.js"></script> <script type="text/javascript" src="zc/ZeroClipboard.js"></script> <button id="my-button">Copy to Clipboard</button> <script language="JavaScript"> ZeroClipboard.setDefaults({ moviePath: "zc/ZeroClipboard.swf" }); var clip = new ZeroClipboard( $("button#my-button") ); clip.on( 'dataRequested', function ( client, args ) { clip.setText("Setting the text in a callback..."); // Don't make this mistake, alert seems to prevent it from working // alert("Clipboard should be set from click on " + this.id); }); // Will never work // clip.setText('This will be copied into the clipboard'); //this should be in my clipboard, but it is not... </script> </body> </html>

Keeping a warning in the callback stops working for me for some reason, so just be aware of it.

Conclusion

So, note that in all three examples, the copy event comes from a click on the flash object. As far as I know, there is no way to copy it only from javascript without user interaction.

For more information, read the ZeroClipboard instructions: https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/instructions.md

+8
source

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

More articles:


All Articles