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

2023-02-15,,,,

最近在学习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复制内容到剪切板,无需插件的相关教程结束。

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

下载本文的Word格式文档,以方便收藏与打印。