將文本複製到剪貼板使用剪貼板零在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();" />

來源

2013-07-02 Amrit Sharma

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

來源

2013-07-04 04:47:08 Manu

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

來源

2013-07-10 06:26:40 Rex

您可以參考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 %>"/>

享受！

來源

2013-07-11 14:12:14 Sergio

我仍然無法做出這項工作......可以請你在jsfiddle中實現這一點。 –

@AmritSharma你可以發佈你的當前代碼嗎？ – Sergio

將文本複製到剪貼板使用剪貼板零在asp.net

回答

相關問題