<問題>
在網頁上選取了一些資料於文字框內,再按Ctrl+A[全選]及Mouse右鍵選[複製](暫存於剪貼簿Clipboard),就可以貼到其它的AP或記事本內... 但如果想用Javascript或jQuery來寫類似功能(於ASP.Net)是否可行呢?!
<解答>
以下示範(try了很久說), 如下:在網頁上選取了一些資料於文字框內,再按Ctrl+A[全選]及Mouse右鍵選[複製](暫存於剪貼簿Clipboard),就可以貼到其它的AP或記事本內... 但如果想用Javascript或jQuery來寫類似功能(於ASP.Net)是否可行呢?!
<解答>
1.於.asp(使用master page)內設定Button及TextBox
<asp:Content ID="Content2" ContentPlaceHolderID="cphBody" runat="Server">
...
<asp:Button ID="btnSelectAll" ToolTip="複製" runat="server" Text="全選+複製到剪貼簿" />
...
<asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" Rows="6" Width="95%" />
...
<script type="text/javascript" src="/path/js/ZeroClipboard.js"></script>
<script type="text/javascript">
var clip = new ZeroClipboard(
document.getElementById('<%= btnSelectAll.ClientID %>'), {
moviePath: "/path/ZeroClipboard.swf",
trustedOrigins: null,
hoverClass: "zeroclipboard-is-hover",
activeClass: "zeroclipboard-is-active",
allowScriptAccess: "sameDomain",
useNoCache: true,
forceHandCursor: false
});
clip.on('complete', function (client, args) {
this.style.display = 'none'; // "this" is the element that was clicked
alert("複製至Clipboard: " + ((args.text == "") ? "空白" : args.text));
});
</script>
...
</asp:Content>
2.於.asp.cs內宣告Page_Load()
protected void Page_Load(object sender, EventArgs e)
{
//全選+複製到剪貼簿.
this.btnSelectAll.Attributes.Add("data-clipboard-target", this.tbContent.ClientID);
}
<參攷>
js实现复制到剪贴板功能，兼容所有浏览器 <註>
經測試IE, Chrome, Firefox後, 除了IE10尚無法正常操作外, 其餘瀏覽器可運行~
留言