文本框复制代码,兼容大部分浏览器(ZeroClipboard插件、附件)

/*css样式*/
*
{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif ,"新宋体";} .demo{width:680px;margin:40px auto 0 auto;} .demo td{padding:5px;} #copy-button{width:125px;height:45px;cursor:pointer;border:0;background:url(images/btn.gif) no-repeat;}
<!--html代码开始-->
<
div class="demo"> <table width="100%"> <tr> <td> <textarea id="copytext" name="codeiframe" rows="5" cols="60">jsfoot 网页特效比网站建设用户提供jquery 特效 js特效 flash特效 div+css教程 html5教程 提示框 弹出层 浮动层 手风琴 评分、进度条 日期时间 颜色选择器 滚动条美化等多种网页特效。http://www.jsfoot.com/</textarea> </td> </tr> <tr> <td><input type="button" value="" id="copy-button" /></td> </tr> </table> </div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/ZeroClipboard.js"></script><!--引入这两个文件即可-->
<script type="text/javascript">
var clip = null;
ZeroClipboard.setMoviePath("swf/ZeroClipboard.swf");/*如果swf文件不与js不在同一目录下,在这里设置*/
$(document).ready(function(){
    clip = new ZeroClipboard.Client();  
    clip.setHandCursor(true);  /*鼠标样式*/
    clip.setText($("#copytext").val());  /*被拷贝的内容*/
    clip.glue("copy-button");/*事件,为触发事件的id*/
    clip.addEventListener("complete", function(){/*监听事件,代码复制完后响应*/
        alert("代码已复制到剪贴板!");
    });
});
</script>

相关演示附件下载:https://files.cnblogs.com/files/harxingxing/ZeroClipboard%E7%BD%91%E9%A1%B5%E4%BB%A3%E7%A0%81%E5%A4%8D%E5%88%B6.rar

注意:代码很奇怪,只有上传到服务器时才可以用。

posted @ 2015-04-25 16:15  作乐  阅读(331)  评论(0编辑  收藏  举报