在多浏览器使用JS复制内容到剪切板,无需插件
最近在学习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复制内容到剪切板
因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...
- js复制内容到剪切板
注意第一部分的内容不兼容Safari,全兼容的请使用第二部分方法 第一部分 查看demo请点 这里. 原生js复制指定内容到剪切板,超简单的实现方式, 实现思路如下: 1.创建一个input,把想要 ...
- js复制内容到剪切板,兼容pc和手机端,支持Safari浏览器
最近,一些项目中用到监听用户复制.剪切的操作. 案例1.在PC端,当用户获得一个京东卡的使用券,当用户使用ctrl + C复制得到的使用券时,将使用券的代号复制到粘贴板,以便于用户ctrl+v进行 ...
- 原生js 复制内容到剪切板
代码: function copyHandle(content){ let copy = (e)=>{ e.preventDefault() e.clipboardData.setData('t ...
- js 复制内容到剪切板
function oCopy(objname){//只兼容IE var obj = $(objname); obj.select(); js=obj.createTextRange(); js.exe ...
- JS禁止右键查看源码,禁止复制,复制内容到剪切板
有时候我们希望自己的网页源码不被查看,这时需要关掉鼠标的右击事件;有时候我们也希望禁止选择页面内容Ctrl+C复制. 1.禁止右键查看源码; <script> //设置右键事件 funct ...
- javascript复制内容到剪切板/网页上的复制按钮的实现
javascript复制内容到剪切板/网页上的复制按钮的实现:DEMO如下 <!doctype html> <html> <head> <meta chars ...
- jQuery-zclip实现复制内容到剪切板
jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题.jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe F ...
- js实现复制内容到剪切板,兼容pc和手机端,支持Safari浏览器
Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<bo ...
随机推荐
- 【转】【Asp.Net】asp.net服务器控件创建
VS新建一个Web服务控件工程,会默认生成以下代码: namespace WebControlLibrary { [DefaultProperty("Text")] [Toolbo ...
- C#使用IrisSkin2.dll美化WinForm程序界面
一.添加控件IrisSkin2.dll. 方法: 1.右键“工具箱”.“添加选项卡”,取名“皮肤”. 2.右键“皮肤”,“选择项”弹出对话框 3.点击“浏 ...
- MySQL基础 - 内置函数
Concat() 用于连接字段,一般DBMS使用+或者||. ex: 注意:上图中新检索出来的列名为'CONCAT(id, '->', name)'(实际上没有列名),这样虽然不影响在MySQL ...
- memcached缓存失效时的高并发访问问题解决
memcached一般用于在访问一些性能相对低下的数据接口时(如数据库),为了保证这些数据接口的稳定性,加上memcached以减少访问次数,保证这些数据接口的健壮性.一般memcached的数据都是 ...
- jquery-lazyload延迟加载图片 及 加载顺序 bug 修复
jquery-lazyload延迟加载图片 代码修改片段 function update() { var counter = 0; /**fix by weiyj start***/ elemen ...
- 将matlab中数据输出保存为txt或dat格式
:FID= FOPEN(filename,permission) 用指定的方式打开文件 FID=+N(N是正整数):表示文件打开成功,文件代号是N. FID=-1 : 表示文件打 ...
- initializer for conditional binding must have optional type not AVAudioPlayer
if let buttonBeep = self.setupAudioPlayerWithFile("ButtonTap", type: "wav") { ...
- HTTP之手机抓包工具篇
简介 现在手机移动互联网时代 手机app 运用 如日冲天.自然手机app的问题排除也是头疼,明明自己测试 上线的接口正常 到了手机app就不行.怎么办呢?别急,现在有好多手机抓包工具啦! 1. Cha ...
- 微信第一个“小程序”亮相:不是APP胜似APP!
前天晚上,微信终于推出了“小程序”功能.看过效果演示之后,网友表示,好多App可以卸载了! 据了解,微信“小程序”已首批开放给200名拥有微信服务号的开发者进行内测,而且目前开发者发布的小程序无法在用 ...
- 《TCP/IP详解卷1:协议》第11章 UDP:用户数据报协议-读书笔记
章节回顾: <TCP/IP详解卷1:协议>第1章 概述-读书笔记 <TCP/IP详解卷1:协议>第2章 链路层-读书笔记 <TCP/IP详解卷1:协议>第3章 IP ...