实现JS复制、粘贴,Chrome/Firefox下可用

背景:

最近一直在做一个Web Excel项目,其中一项功能一直很纠结,就是数据的复制粘贴功能。功能要求:可以把Web端数据粘贴到Excel中,也可以从Excel中直接粘贴数据到页面编辑器中。支持Button粘贴和Ctrl+C/Ctrl+V快捷键复制粘贴。

本以为这个功能会很简单,但是查了很多资料,用JS操作粘贴板IE下很好用,直接支持一个window.clipboardData对象,通过这个对象可以访问到粘贴板中内容。但是chrome和firefox支持不是很好。Chrome和firefox为什么不支持有点难以理解,为了保护系统,免受外来侵害?

在网上搜了很多资料,但是大部分资料都是介绍在IE下使用window.clipboardData对象访问粘贴板实现Copy和paste,但是单独只为IE开发一个复制、粘贴功能,非常不实用;当然网上还有其他方法,比如通过Flash的间接方式操作OS粘贴板,虽然有这类插件,但是也很不好用,只能用户点击复制按钮才行,而且也不灵活。

后来想了想,很多页面都是禁止copy的,那么通过浏览器事件,是不是可以访问到粘贴板?查了下资料,IE/Chrome/Firefox都支持oncopy/onpaste/oncut事件,虽然不是在所有元素上都支持。但是这里通过事件的event应该可以访问到用户复制了什么内容,并修改Data。动手实验了下,通过console.debug查看chrome和firefox的event对象,会发现event里面有一个clipboardData对象,所以后面的事情就不难了。看如下Firefox的截图就知道了:

虽然Chrome和Firefox下可以通过event获取clipboardData对象,但是要注意在IE下面,copy和paste事件的event对象是没有这个对象的,所以还需要通过window来获取clipboardData,最终代码如下:

//绑定在了body上,也可以绑定在其他可用元素行,但是不是所有元素都支持copy和past事件。
$(document.body).bind({
	copy: function(e) {//copy事件
		var cpTxt = "复制的数据";
		var clipboardData = window.clipboardData; //for IE
		if (!clipboardData) { // for chrome
			clipboardData = e.originalEvent.clipboardData;
		}
		//e.clipboardData.getData('text');//可以获取用户选中复制的数据
		clipboardData.setData('Text', cpTxt);
		alert(cpTxt);
		$('#message').text('Copy Data : ' + cpTxt);
		return false;//否则设不生效
	},paste: function(e) {//paste事件
		var eve = e.originalEvent
		var cp = eve.clipboardData;
		var data = null;
		var clipboardData = window.clipboardData; // IE
		if (!clipboardData) { //chrome
			clipboardData = e.originalEvent.clipboardData
		}
		data = clipboardData.getData('Text');
		$('#message').html(data);
	}
});

通过clipboardData的getData和setData方法就可以和粘贴板交互了。而且要注意的是getData和setData只接受Text和Url两个控制参数,一般用Text参数就够了。

好了,上面可以“控制”粘贴板数据,接下来就是解析从Excel中“获得”的数据了。( ^_^ )

时间: 2024-08-11 23:50:29

实现JS复制、粘贴,Chrome/Firefox下可用的相关文章

js复制按钮在ie下的解决方案

源码如下: <input class="width200" maxlength="32" type="text" id="strNum" name="strNum" value="这是要复制的内容"/> <input class="btn_blue" type="button" value="点击复制" onc

JS复制粘贴解决方案

1 var clipboardData = window.clipboardData; //for IE 2 if (!clipboardData) { // for chrome 3 window.prompt("按下Ctrl+C复制", adress); 4 }else{ 5 clipboardData.setData('Text', adress); 6 eventBusService.publish(controllerName,'appPart.load.modal.aler

sqlplus里面怎么复制粘贴(亲测可用)

其实这么小的事情不想写篇帖子的,自己百度就好. 问题是度娘的答案太杂,而且是乱七八糟,还是给出自己亲测的答案吧 1.以管理员身份运行cmd(win7系统) 2.正常的输入sqlplus来登陆 3.在别处copy了内容后,在sqlplus里面,右键-P,即可 注:关键是要以管理员身份运行cmd才行,普通运行没有右键选项,你用copy+v的话也只会出现个~V

JS下的复制粘贴

IE : 1 <input type="text" id="Settext" /> 2 3 <input type="button" onclick="copyToClipboard()" /> body内 1 function copyToClipboard() { 2 3 if (document.all) { //判断IE 4 5 var text = document.all("Set

JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)

现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏览器的js复制内容到剪贴板的方案: 这个方案是一个最流行的方法: 著名的Clipboard Copy解决方案 利用一个clipboard.swf作为桥梁,复制内容到剪贴板. 原理是:创建一个隐藏的flash文件,同时给给flash的变量FlashVars 赋值“clipboard=..”,通过这个赋

通过如何通过js实现复制粘贴功能

在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>clipboard</title> <SCRIPT language=JavaS

firefox浏览器不支持复制粘贴(linux)

在Linux主机下使用firefox在线编辑文章时,提示不支持复制粘贴选项,并给出了解决方法,记录一下 1.先找到本机firefox的配置文件的所在文件夹位置,不知道的请遵循以下步骤 点击菜单栏的帮助-->疑难解答信息-->找到配置文件夹-->打开所在文件夹  这就是firefox的配置文件的所在位置了 2.在配置文件夹里面找到user.js文件,如果没有可以自己创建一个 编辑user.js文件 user_pref("capability.policy.policynames&

兼容IE与Firefox的js 复制代码

<script type="text/javascript"> function copyCode(id){     var testCode=document.getElementById(id).value;     if(copy2Clipboard(testCode)!=false){         alert("生成的代码已经复制到粘贴板,你可以使用Ctrl+V 贴到需要的地方去了哦! ");     } } copy2Clipboard=f

[转]IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载),按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取

兼容问题1: 页面的分享等插件加载不全,并无法点击. 兼容问题2: IE下页面选择器(#id..class.etc.)绑定click事件无法访问到,后台springmvc方法,也无法获取ajax的success方法返回值data. 兼容问题3: 在IE和Google下能够获取,ajax的success返回的数据data,但firefox下获取不到. 兼容问题4: 页面跳转,或url进入,js代码不能正确执行,如果按了F12后(开启F12),JavaScript(加载)事件可以正常响应,一切都正常