在 asp.net 中使用零剪贴板将文本复制到剪贴板答案

【问题标题】：Copy text to clipboard using Zero Clipboard in asp.net在 asp.net 中使用零剪贴板将文本复制到剪贴板
【发布时间】：2013-07-02 04:48:47
【问题描述】：

我正在尝试使用 Zero *剪贴板* 在客户端点击时将文本从 文本框 复制到 剪贴板 按钮。我尝试了很多天，但没有成功完成这项工作。

在场景中，我有一个 文本框，它呈现来自 数据库 的数据。我有一个Button，当客户点击它时应该复制Textbox 的文本。我试过跟随但它不起作用。

我们将不胜感激。

 <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();" />

【问题讨论】：

标签： c# asp.net web-applications copy zeroclipboard

【解决方案1】：

<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");
} );

【讨论】：

【解决方案2】：

<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】：

首先，您试图通过错误的 id 选择元素。由于您使用网络表单，正确的方法是：

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

此外，遵循不显眼的 js 风格的好的解决方案可能如下所示：

$().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);
    });
});

你的按钮也应该有数据属性data-clipboard-target（实际上有三种方法可以做到）。将 data-attributes 设置为 webforms 控件很棘手，因此您可能希望避免在此处使用 asp.net 按钮并这样做：

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

享受吧！

【讨论】：

我仍然无法完成这项工作。请您在 jsfiddle 中实现它。