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

问题描述：

我想使用零 * 剪贴板 *从文本框的文本复制到剪贴板当客户端点击一个按钮。我尝试了很多天，但没有运气来完成这项工作。将文本复制到剪贴板使用剪贴板零在asp.net

在情景中，我有一个文本框，它提供的数据来自数据库。我有一个按钮当客户端点击时应该复制文本文本框。我尝试了以下，但它不工作。

一些帮助将不胜感激。

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

答

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

答

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

您可以参考https://github.com/zeroclipboard/ZeroClipboard。 – Rex

答

首先，你试图通过错误ID挑元素。由于您使用的WebForms，正确的方法是：

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（实际上是有三种方式去做吧）。设置数据属性的WebForms控制是棘手的，所以你可能要避免使用此按钮asp.net和不喜欢它：

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

享受！

我仍然无法做出这项工作......可以请你在jsfiddle中实现这一点。 –

@AmritSharma你可以发布你的当前代码吗？ – Sergio

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

相关推荐