ZeroClipboard Issue #244 - Proving the fix

by James Greene

HTML

<script src="http://zeroclipboard.org/javascripts/zc/v2.0.0-beta.8/ZeroClipboard.js"></script>
<table width="0" border="0">
    <tr>
        <td>
            <input type='text' id='textid_text' value='your text' />
        </td>
        <td>
            <div id='textid' class='clip_button'>COPY</div>
        </td>
    </tr>
    <tr>
        <td>
            <input type='text' id='textid2_text' value='your text 2' />
        </td>
        <td>
            <div id='textid2' class='clip_button'>COPY</div>
        </td>
    </tr>
    <tr>
        <td>
            <input type='text' id='textid3_text' value='your text 3' />
        </td>
        <td>
            <div id='textid3' class='clip_button'>COPY</div>
        </td>
    </tr>
    <tr>
        <td>
            <input type='text' id='textid4_text' value='your text 4' />
        </td>
        <td>
            <div id='textid4' class='clip_button'>COPY</div>
        </td>
    </tr>
    <tr>
        <td>
            <input type='text' id='textid5_text' value='your text 5' />
        </td>
        <td>
            <div id='textid5' class='clip_button'>COPY</div>
        </td>
    </tr>
</table>

CSS

.clip_button {
    background:#063;
    padding:4px;
    width:100px;
}
.clip_button.zeroclipboard-is-hover {
    background:#00f;
}

JavaScript

var clip = new ZeroClipboard($(".clip_button"));

 	clip.on('ready', function (/* e */) {
 	    alert("movie is loaded");
 	    clip.on('copy', function (e) {
 	        e.clipboardData.setData("text/plain", $("#" + this.id + "_text").val());
 	    });

 	    clip.on('aftercopy', function (e) {
 	        alert("clipboard copied: " + JSON.stringify(e.data["text/plain"]));
 	    });
 	});