码迷,mamicode.com
首页 > Web开发 > 详细

在多浏览器使用JS复制内容到剪切板,无需插件

时间:2015-07-22 20:36:19      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:

最近在学习DHTMLX,下载了一些JS源码,使用谷歌浏览器,在学习dhtmlxGrid部分进行复制表格内容时,发现,在线版的可以复制成功,而本地的不可以复制,报类似访问剪切板错误,经查找原因,原来是谷歌处于安全考虑,不支持调用剪切板。我直接访问了在线的js,拷贝下来,和本地的对比了一下,代码不一样。简单研究了一下在线的js,发现,在线版的js里面有_clip_area,而调试中发现var c = this._clip_area = document.createElement("textarea");想到,原来是把表格里的数据复制到了textarea标签中了,这样就像复制普通文本一样得到了数据,无非就是dhtmlx再进行一些格式化处理

上简单demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <h1><span style="color:red">刷新完页面后,请立即使用ctr+c才能赋值到文本域的内容,不多解释,后期可依据这个,利用各种事件加以控制即可</span></h1>
    <textarea id="txt" style="position: absolute; width: 1px; height: 1px; overflow: hidden; color: transparent; bottom: 1px; right: 1px; border: none; background-color: transparent;">测试</textarea>
    <textarea style="width:50px;height:50px"></textarea>
    <script type="text/javascript">
        document.getElementById("txt").focus();
        document.getElementById("txt").select();
    </script>
</body>
</html>

 

在多浏览器使用JS复制内容到剪切板,无需插件

标签:

原文地址:http://www.cnblogs.com/hujiapeng/p/4668305.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!