EzDevInfo.com

How can I copy text to the clipboard without flash in HTML5?

On Google Drive, if I try to share a file and I use Google Chrome, this button appears:

Now, if I press "copy link", it will select the textarea down the button. (it is a input type button) here the picture:

And the question is .... How google do to copy ad text/url to te clipboard without using flash (zeroclipboard)? which API of chrome it used? I'm try to inspect this but see only js.

ZeroClipboard doesn't work in loaded js file

If I put a script tag in the HTML page, it will work, but when I load an external page with the ZeroClipboard library included in it, I can't get it to work. The object gets created, and is over the correct element, but it doesn't emit any events, and doesn't copy the clipboard text. Example:

var ZeroClipboard = defineZClip(); // This is a scoped function that has the zclip library in it

window.onload = function () {

    console.log("doc loaded"); // This fires

    var button = document.getElementById('z-button');
    var clip = new ZeroClipboard(button, {
        moviePath: 'ZeroClipboard.swf'
    });
    clip.on('load', function () {
        console.log("loaded"); // This never fires
    })

};

I can get around this by dynamically inserting a script tag with the contents of the script tag initializing ZeroClipboard, but if I initialize it from my script it doesn't work. Like so:

var ZeroClipboard = defineZClip();
window.ZeroClipboard = ZeroClipboard;

window.onZeroLoad = function (clip) {
    console.log("zero loaded"); // This fires
};

var scriptText = 'window.onload = function () { console.log("window loaded");var button = document.getElementById("z-button");'
            +' var clip = new ZeroClipboard(button, {moviePath: "ZeroClipboard.swf"});'
            +' clip.on("load", window.onZeroLoad );'
            +'};'
var script = document.createElement('script');
script.innerHTML = scriptText;
document.head.appendChild(script);

This offers some distinct disadvantages, though. Such as...it sort of defeats the purpose of having everything scoped, since now ZeroClipboard will HAVE to be accessible via the window. Plus it's much harder to read and all that.

ZeroClipboard (on click of a link) not working properly

I am using zeroclipboard for copy functionality but it doesnt seem to work properly..

I am trying to copy the data from the page on click of a link.

I have included the necessary files in my html,

<script type="text/javascript" src="/DataTables-1.9.4/zeroclipboard/ZeroClipboard.js"></script>
<script language="JavaScript">
    ZeroClipboard.setMoviePath('/DataTables-1.9.4/zeroclipboard/ZeroClipboard.swf');    
</script>

I have the below function in my js file

<a rel='nofollow' href='javascript:void(0);' onclick=copy(\""+idValue+"\") id=d_clip_button><font size=2 color=blue>Copy to clipboard</a>

function copy(elementIdValue){

var value=$("#"+elementIdValue).html();
var clip = new ZeroClipboard.Client();
var myTextToCopy = $(value).text();  

clip.glue('d_clip_button');
clip.addEventListener('onMouseover', clipboardEvent);
function clipboardEvent() {
            clip.setText( finalText);
}

Copy functionality works fine when I double click the link but doesn't work if I single click the copy link. Also for some reason the data copied initially doesn't get deleted.. When I open a new page and try to copy the data, it still has the old data. Can someone please let me know how to fix this issue?

trouble with ZeroClipboard of add a tooltip

I'm trying to use Zeroclipboard http://code.google.com/p/zeroclipboard/ to copy stuff to the clipboard and add a tooltip when the mouse hover on the flash. but it doesn't seem to be working.

my html code:

<div rel="<?php echo $url;?>" class="cp-code">copied code</div>
<div class="test" style="display: none; border: 1px solid #ccc; padding: 8px;">click copy,test,test</div>

My js code: i have added the jquery library.

ZeroClipboard.setMoviePath("http://example.com/js/ZeroClipboard.swf");
var clip = null;
var url = '';

function init() {
    clip = new ZeroClipboard.Client();
    clip.setHandCursor( true );

    $('.cp-code').mouseover( function() {
        clip.setText(this.innerHTML);
             $('test').style.display = 'block';
        if (clip.div) {
            clip.receiveEvent('mouseout', null);
            clip.reposition(this);
        } else {
                        clip.glue(this);
                }
        clip.receiveEvent('mouseover', null);
        url = $(this).attr('rel');
    });

    clip.addEventListener('mouseUp', function(client) {
        window.open(url);
    });
  clip.addEventListener('mouseOut', function (client) {
 $('test').style.display = 'none';
   });

    }

$(document).ready(function() {
    init();
});

Is there any movement in the standards body to support a safe way to copy to the clipboard?

It seems like a general purpose need on the web that a page can copy something to the user's clipboard if the request is initiated by the user (not just by some script). A classic example is something like https://bitly.com/ that wants to provide you with a shortcut link on your clipboard that you can paste somewhere else.

I'm using the Flash-based ZeroClipboard now to solve this problem (as is bitly too), but would like to get rid of Flash in my pages for a variety of reasons (mobile, performance, security, standards, viewer hassle). Since ZeroClipboard requires that it is initiated with an actual mouse click by the user, it seems like it has proven to be relatively safe (aside from the general Flash vulnerabilities).

I have several pages that users come to in order to get stuff that they want on their clipboard so they can paste it elsewhere (snippets of JS or CSS). It's obviously easier for the end-user if they don't have to manually select the correct piece of text and then manually copy it to the clipboard.

So ... I'm wondering if this is being discussed anywhere in the standards organizations now? Right now, it's the only reason left that I have flash in my pages.

For any standards efforts that are being discussed, is there any support coming or available in any of the browsers for it?

zeroclipboard fire click event via jquery

ZeroClipboard is a javascript + flash script that allows the browser to put text into the clipboard, it puts a transparent flash over the selected element , and when you click it you can insert text into the clipboard, this works, no problem, but i want to make it automatic. Onload put a string in the clipboard, for the user to be able to paste it latter. Some code main.js

$('document').ready(function() {
ZeroClipboard.setMoviePath("http://url/to/ZeroClipboard.swf");
  var clip=new ZeroClipboard.Client();
 clip.on( 'load', function(client) {
   clip.glue('#redirlink');
} );
});

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
  <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="main.js"></script>

    <title>TEST</title>
  </head>
  <body>


      <div >
     <a  id="redirlink" data-clipboard-text="abcd" rel='nofollow' href="http://alabala.com" >Click HERE</a>

    </div>

  </body>
</html>

ok now the question is how can i simulate a click event on the the zeroClipboard puts? i have tried with , $('#obkect_id").click(); it doesn't work (the event fires, but it has no effect on the clipboard, but when i click with the mouse, it works). Is there any way i can achieve that?

Jquery/javascript copy to clipboard

I'm using http://www.steamdev.com/zclip/#usage to copy some text to the clipboard and that code is working just fine. It uses flash to create a crossbrowser solution and it is based on ZeroClipboard, which seems to be considered to be the best working solution at the moment.

However I would like to have multiple copy to clipboard buttons or links on my page. Here is an example.

http://jsfiddle.net/stofke/TB23d/

This code works, it copies the text of the coupon code to the clipboard and opens up a new page with the correct link. How can I use that code on other links without having to duplicate it for each and every link / id.

Using just the class

$(function() {
$('.copy').zclip({
    path: 'http://shopsheep.com/js/ZeroClipboard.swf',
    copy: $(this).text(),
    afterCopy: function() {
        window.open($(this).attr('href'));
    }
});

});

doesn't work: as you can see here: http://jsfiddle.net/stofke/EAZYW/ if you remove the afterCopy function you'll see that $(this).text() will return the whole page instead of just the text between the link tag.

doing something like this

$(function() {
$('a.copy', this).zclip({
    path: 'http://shopsheep.com/js/ZeroClipboard.swf',
    copy: $('a.copy', this).text(),

});

});

slightly improves upon it but returns all text between the link tag as you can see here. http://jsfiddle.net/stofke/hAh3j/

zeroclipboard copy text inside jquery dialog doesn't work

I am using jquery ui dialog in my page and surprisingly the zeroclipboard copy-to-clipboard functionality does not work from within the jquery dialog box.

This is my entire code...

<html>
<head>
    <link rel='nofollow' href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" 
    type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://davidwalsh.name/dw-content/ZeroClipboard.js"></script>

    <script type="text/javascript"> 
    $(function(){
        $('#ex1').click(function(){
            var div = $('#div1');
            div.dialog(
                {
                    title:'Dialog1',
                    width: 300,
                    height: 150,
                    closeOnEscape: false
                });
        });
    });

    function toClipboard(me, msg_id) {
                        ZeroClipboard.setMoviePath('http://davidwalsh.name/dw-content/ZeroClipboard.swf');
                        var clip = new ZeroClipboard.Client();
                        //clip.setHandCursor( true );
                        var txt = $("#msg_p_span_"+msg_id).html();

                        console.log("Text: "+txt);
                            clip.addEventListener('mousedown',function() {
                            clip.setText(txt);
                            console.log("Copied");
                            });
                            clip.addEventListener('complete',function(client,text) {
                            alert('copied: ' + text);
                            });
                        clip.glue(me);
                }
    </script>

<title>jQuery UI dialog extra demo</title>
</head>
<body>

  <span id="msg_p_span_1" style="display:none;">Testing the clipboard copy 1.</span>
  <span title="Copy to clipboard" style="cursor: pointer; text-decoration:underline;" onmouseOver="toClipboard(this, 1)">Copy</span>
  <button id="ex1">Launch dialog</button>

<div id="div1" style="display:none;">

<p style="padding: 10px 3px; font-size: 12px;" id="msg_p_2">
<span id="msg_p_span_2">Testing the clipboard copy 2.</span>
<span style="float: right; width: 25px; margin-right: 10px;">
<span title="Copy to clipboard" style="cursor: pointer; text-decoration:underline;" onmouseOver="toClipboard(this, 2)">Copy</span>
</span>
</p>

</div>  
</body>
</html>

If i click on the first 'Copy' link, the text is getting copied well and an alert is generated. But when i launch the jquery dialog box and click on the 'Copy' link inside it, the text is not copied.

Probably someone can reproduce the issue with the exact above code (copy-paste) and find it.

Note: I am following the core example at Davidwalsh site

Zeroclipboard multiple elements

I'm having trouble creating multiple Zeroclipboard instantiations in my code, with each instantiation launching a popup window after it is invoked.

<a class="xxx" rel='nofollow' href="popup.url.php" ><span >FRSDE3RD</a>
<a class="xxx" rel='nofollow' href="popup.url2.php" ><span >FRSDE3RD2</a>
<a class="xxx" rel='nofollow' href="popup.url3.php" ><span >FRSDE3RD3</a>
$(document).ready(function(){
    ZeroClipboard.setMoviePath( 'path/to/swf/ZeroClipboard.swf' );
    // setup single ZeroClipboard object for all our elements
    clip = new ZeroClipboard.Client();
    clip.setHandCursor( true );

    // assign a common mouseover function for all elements using jQuery
    $('a.xxx').mouseover( function() {
        // set the clip text to our innerHTML
        var url = $(this).attr("href");
        var code = $(this).children('span').html();
        clip.setText( $(this).children('span').html() );//this.innerHTML );

        clip.glue(this);
        clip.addEventListener('onMouseDown', function(){
            clip.reposition(this);
            clip.setText( code );
        });

        clip.addEventListener('onComplete', function(){ 
            clip.reposition(this);
            popUp(url);
        }); 


    });
});

function popUp(URL)
{
    day = new Date();
    id = day.getTime();
    eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=1,scrollbars=1,location=1,statusbar=1,menubar=1,resizable=1,width=1024,height=768,left = 328,top = 141');");
}

I succeed on generating the copy to clipboard functionality, but if I use either onMouseUp, onComplete events to trigger popup function, it either fire like 4-5 popups or doesn't fire at all.

P.S. I tried to adapt the solution from How to load an Ajax response into clipboard using jQuery and ZeroClipboard? instead of ajax call just copy to clipboard and on complete to lunch a popup ... as I said didn't worked for me.

What else I figured it out while having flashblocker enabled is that every time I rollover a CODE tag a new flash is being created on the same spot so this might be an explanation why I'm having 3-4 popup when I click it. If I rollover more, more popups come. Is there a way to stop the flash from creating on same spot or destroy on rollout?

ZeroClipboard just isn't working

Originally, this post was regarding my attempts to inject ZeroClipboard into web pages by and for use by my Chrome extension, but I've dumbed the scenario down and down and down in a seemingly futile attempt to identify the issue and I still can't get it to work.

I'm even having difficulty getting the actual, documented "Minimal Example" on ZeroClipboard's own GitHub to work (admittedly, I've modded the source to actually be HTML5-valid, but the exact original didn't work either). Even test.html, which is included in the tar.gz archive, doesn't work!

"Minimal Example": Code

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    </head>
    <body>
        <input type="button" id="d_clip_button" data-clipboard-text="Copy Me!" value="Copy To Clipboard" />
        <script src="ZeroClipboard.js"></script>
        <script>
            var clip = new ZeroClipboard( document.getElementById('d_clip_button') );
        </script>
    </body>
</html>

"Minimal Example": Console Output

Uncaught TypeError: object is not a function  index.html:11

Info

• The entire contents of the zeroclipboard-1.0.7.tar.gz archive are in the same directory as index.html.
• The ZeroClipboard.js file isn't corrupted / incomplete and is being loaded correctly.
• I'm using Chrome v24.0.1312.52

Either I'm missing something really, really obvious here or ZeroClipboard's documentation / functionality is abysmal.

How can I glue() a ZeroClipboard clip to a newly inserted element?

I am trying to write a basic blogging platform, and I want to offer users the ability to copy code within a pre block to their clipboard.

I am using ZeroClipboard to achieve this. Once the document is ready, I loop through each pre on the page, adding a clipboard item to it as follows:

    $(document).ready(function() {

        ZeroClipboard.setMoviePath( 'ZeroClipboard/ZeroClipboard.swf' );
        var preNum = 1

        $('pre').each(function() {
            // Get a unique id for the element I will be inserting
            var id = 'copy-btn-' + preNum++
            // Capture the text to be copied to the clipboard
            var text = $(this).text()
            // Insert the element, just before this
            $('<div class="copy-btn" id="' + id + '-cont"><i class="icon-file icon-white" id="' + id + '"></i></div>').insertBefore(this)
            // Capture the newly inserted element
            var elem = $(this).prev()

            // Create the clip, and glue it to the element
            var clip = new ZeroClipboard.Client();
            clip.setText(text)
            clip.glue(elem)
       })
   });

When I try to do this, the javascript console reports: Uncaught TypeError: Cannot read property 'zIndex' of undefined

My current understanding of the problem is that the inserted element is not yet available in the dom when I try to glue the clip to it, which is why no gluing is occurring.

Anybody know how I might be able to accomplish this?

Copy text to clipboard using Zero Clipboard in asp.net

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>
            &nbsp;<asp:Button ID="d_clip_button" runat="server" Text="Copy" OnClientClick="javascript:test();" />

jQuery UI Dialog and Flash in IE

I've been trying to get Zero Clipboard and jQuery UI Dialog to play nice together, and it's proving to be rather difficult.

Zero Clipboard allows copying to clipboard from Javascript by placing a transparent Flash movie over a button, so that the user clicks on the Flash when he tried to click the button. This works nicely and cross-browser as you can see in the demo page.

However, when trying to use this in a jQuery UI Dialog box something seems to go wrong.

First, I discovered that the flash element must be placed inside the dialog element, otherwise Chrome and IE refuse to respond to click events. This means I can't use the glue convenience method, but that's OK.

However, now IE for some reason won't accept the setText method on the Flash element.

An example of what I did is here. My code starts around line 300, and the most relevant lines are:

$("#showme").dialog({autoOpen: false, width: 550, height: 200});
$("#showme").bind("dialogopen", function() {
    if($("#clipflash").length == 0) {
        var btn = $("#d_clip_button");
        $("<div id='clipflash' style='position:absolute; background: #f00; z-index: 9999' />")
            .css(btn.position())
            .width(btn.width())
            .height(btn.height())
            .html(clip.getHTML(btn.width(), btn.height()))
            .appendTo("#showme");
    }
});

I colored the div red so it's easier to spot and set its z-index to 9999, just to be safe. I then set the position and size to cover the "button", and add the HTML for the Flash element with clip.getHTML().

I've been working on this for several hours now, so any help would be greatly appreciated.

Almost forgot: my problem is that IE7 says "Object does not support this property or method" inside the Zero Clipboard code.

UPDATE

powtac's comment points to something that looks really promising:

I forgot the own golden rule: In order for the Flash ExternalInterface to work in IE 7, you have to stuff the EMBED/OBJECT HTML into the DIV element AFTER it gets appended to the DOM. Stupid IE.

However, switching the lines .html(clip.getHTML(btn.width(), btn.height())) and .appendTo("#showme") didn't help. Even doing a setTimeout for adding the flash HTML later did not help. I feel like I'm really close, though...

ZeroClipboard + angular, multiple instances

app.directive('copyPost', ['$window', '$filter', 'ZeroClipboardPath', function ($window, $filter, ZeroClipboardPath) {
    return {
      scope: {
        postFn: '&',
        postSuccess: '&',
      },
      restrict: 'A',
      terminal: true,
      prioriry: 10,
      link: function (scope, element, attrs) {
        scope.disaplyValue = 'Copy';
        ZeroClipboardPath = 'lib/zeroclipboard/ZeroClipboard.swf';
        var clip = new ZeroClipboard( $(element), {
          moviePath: ZeroClipboardPath    
        });
        clip.on('dataRequested', function(client, args) {
          scope.postFn().then(function(data){
            client.setText(data.data[0].external_url);
            scope.postSuccess();
          });  

        });
      }
    }
  }]);

Creating multiple instances of this directive makes the swf object to trigger the event only for the first instance over the the entire application(same link copied).

obviously I have more than one link that I would like to allow my user to copy in my application.

Any help is much appreciated

Bootstrap + Zeroclipboard = Tooltips can't be shown on hover?

I'm trying to use ZeroClipboard for a "Click to copy" feature on an element and the same time show a bootstrap tooltip.

Unfortunately the tooltip doesn't work if I use ZeroClipboard on an element. Any help would be greatly appreciated...

// BOOTSTRAP TOOLTIP
$('.myDiv').tooltip({
    title:      'Click to copy',
    placement:  'right',
    trigger:    'hover',
    animation:  true
});

// ZEROCLIPBOARD
var clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
$('.myDiv').live('mouseover', function () {
  clip.setText($(this).text());

  if (clip.div) {
    clip.receiveEvent('mouseout', null);
    clip.reposition(this);
  } else clip.glue(this);

  clip.receiveEvent('mouseover', null);
});