在这节,我们将看到如何把多行文本框的内容复制到剪贴板上。
注意:jQuery clipboard plugin 只支持IE
界面代码:
1 < form id ="form1" runat ="server" >
2 < div align ="center" >
3 < fieldset style ="width: 400px; height: 300px;" >
4 < p > 请输入你的评论: </ p >
5 < asp:TextBox ID ="txtComment" TextMode ="MultiLine" Rows ="5" Width ="300px" Height ="200px"
6 runat ="server" ></ asp:TextBox >
7 < br />
8 < asp:HyperLink ID ="lnkHighlight" Text ="点击复制评论" runat ="server" ></ asp:HyperLink >
9 </ fieldset >
10 </ div >
11 </ form >
显示界面:
脚本部分:
1 < script src ="Scripts/jquery-1.4.1-vsdoc.js" type ="text/javascript" ></ script >
2 < script src ="Scripts/jquery.clipboard.js" type ="text/javascript" ></ script >
3 < style type ="text/css" >
4 a
5 {
6 color : #0000FF ;
7 cursor : pointer ;
8 }
9 </ style >
10 < script type ="text/javascript" >
11 $(document).ready( function () {
12 $.clipboardReady( function () {
13 $( " a " ).click( function () {
14 $( " #<%=txtComment.ClientID %> " ).select();
15 $.clipboard($( " #<%=txtComment.ClientID %> " ).val());
16 });
17 });
18 });
19 </script>
加入脚本后点击复制按钮显示效果如下:
打开记事本按Ctrl+V:
哈哈成功了,就这么简单。
插件下载地址:
http://plugins.jquery.com/project/clipboard
另外有一个Zero clipboard 插件支持跨浏览器,它是通过一个flash文件和JavaScirpt接口实现的,想了解更多信息,请访问http://code.google.com/p/zeroclipboard/