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

时间：2023-11-25 19:31:44

最近在学习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>

相关文章