`
huangyongxing310
  • 浏览: 495915 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

前端实现从剪贴板中获取数据

 
阅读更多
//绑定在了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);
	}
});

---------------------
作者:赛小文
来源:CSDN
原文:https://blog.csdn.net/hackersaillen/article/details/45694181
版权声明:本文为博主原创文章,转载请附上博文链接!
分享到:
评论

相关推荐

    实现网页截图功能,将剪贴板中的图片资源粘贴到网页中

    3. 使用`navigator.clipboard.read()`获取剪贴板数据。 4. 识别并提取图片数据。 5. 将图片数据转换为可显示的`Blob`对象,并显示在网页上。 6. 可选:上传图片数据到服务器。 7. 处理可能出现的错误和用户体验优化...

    js实现点击后将文字或图片复制到剪贴板的方法

    在前端开发中,将文字或图片复制到剪贴板是一项常用的功能。传统上,这类操作多在桌面应用程序中见到,但随着Web技术的发展,现在JavaScript也能够实现这一功能。本文将介绍如何利用JavaScript实现点击按钮后,将...

    excel复制数据,粘贴到页面表格插件.zip

    当用户执行粘贴操作时,我们可以捕获`event`对象,从中提取剪贴板上的数据。 3. **HTML5的Clipboard API**:现代浏览器提供了Clipboard API,使得我们能够读取和写入剪贴板数据。在这个项目中,可能用到了`event....

    复制到剪贴板的代码.rar

    3. 在事件处理函数中,获取需要复制的代码文本,这可能是从DOM元素中提取,也可能是从变量中直接获取。 4. 利用`Clipboard API`的`writeText`方法将文本写入剪贴板。如果浏览器不支持此API,可以考虑使用polyfill...

    JS 巧妙获取剪贴板数据 Excel数据的粘贴

    发现google sheet实现了excel的纯文本的多数据格粘贴,没有安全限制的需要,没有使用flash。可能很多人都知道这种方法了,反正我一开始很惊讶的,但是无奈,google的js文件是处理过的,看起来太累了。然后又去找...

    BlazorClipboard:Blazor的剪贴板API

    BlazorClipboard是一个专门为Blazor框架设计的剪贴板API,它允许开发者在Blazor应用程序中轻松实现复制、粘贴功能,极大地增强了用户交互性。Blazor是Microsoft开发的一个基于WebAssembly的前端框架,使用C#语言进行...

    [js]javascript与剪贴板交互

    JavaScript 与剪贴板的交互是前端开发中常见的功能需求,比如实现网页中的复制、剪切和粘贴操作。在JavaScript中,与剪贴板进行交互涉及到浏览器的安全性和隐私政策,因为这涉及到用户数据的访问。 1. **操作剪贴板...

    基于js粘贴事件paste简单解析以及遇到的坑

    在Chrome浏览器中,`e.clipboardData`具有`items`属性,可用来检查剪贴板中是否存在图片等复杂数据。然而,Safari浏览器并不支持这一属性,因此在实现跨浏览器兼容时需特别注意。 `clipboardData`对象是`Data...

    ClipBoard:一个简单的基于 Web 的剪贴板

    JavaScript也可以用来存储和读取剪贴板中的数据,可能使用`navigator.clipboard` API来实现剪贴板操作。 4. **AJAX**(Asynchronous JavaScript and XML):虽然名称中有XML,但实际上AJAX常用于与服务器进行非阻塞...

    剪切板复制粘贴小demo

    在“GoogleShare”这个文件名中,我们可以推测这个demo可能涉及到跨平台或者使用Google服务进行数据共享的剪切板实现。在实际开发中,如果涉及跨平台(比如桌面应用和移动应用),可能需要用到特定平台的API,例如...

    前端开源库-gulp-clipboard

    3. **gulp-clipboard**: 这个插件利用了剪贴板API(如clipboardy库),实现了从Gulp任务中直接将文件内容复制到剪贴板的功能。这对于开发过程中的快速分享、调试和测试非常有用。 4. **使用方法**: 要使用gulp-...

    支持FireFox的剪貼板

    在IT领域,尤其是在前端开发中,实现跨浏览器的剪贴板功能是一项常见但技术细节繁复的任务。根据给定的文件信息,我们将深入探讨“支持Firefox的剪贴板”这一主题,包括其背景、实现原理以及代码分析。 ### 背景与...

    vue前端截图插件electron的

    6. **用户交互**: 设计一个直观的UI,比如浮动的截图工具条,包含选择区域、复制到剪贴板、保存到本地等功能。用户可以通过点击按钮触发截图事件。 7. **事件监听和响应**: 在Vue组件中,监听用户的操作,比如点击...

    实现网页表格输入框批量粘贴

    `event.clipboardData.getData()` 方法可以用于获取剪贴板中的数据,通常以`text/plain`类型获取。 ```javascript var pastedData = event.clipboardData.getData('text/plain'); ``` 3. **数据处理**:Excel数据...

    Text Template Parser(多源数据提取软件)官方正式版V2.5 | 数据提取软件有哪些?

    拥有友好的用户界面,可以帮助用户从包括文本文件、网页、电子邮件、excel、pdf、Web表单在内的几乎任意类型的数据源文档中解析、检索、转换、转换和提取数据,同时Text Template Parser还允许用户将检索和提取到的...

    前端项目-angular-clipboard.zip

    ”这说明该项目是一个基于AngularJS的前端应用,它包含了自定义的AngularJS指令,这个指令可以实现用户友好的剪贴板交互,即复制文本内容。传统的Web页面复制功能可能会依赖Flash插件,但这个项目避免了这一依赖,...

    JS execl数据复制到web网页表格

    综上所述,实现"JS Excel数据复制到web网页表格"的过程涉及到文件读取、Excel解析、数据转换、DOM操作和可能的剪贴板API使用。这个过程中,`SheetJS`库扮演了关键角色,而良好的前端设计和交互体验也是必不可少的。

    传播智客杨中科DOM 10-20 学习笔记

    最后,在第四个示例的扩展部分(标为4.2),我们看到了如何修改剪贴板中的数据,并在数据后添加来源网址信息: - 通过`clipboardData.getData`读取剪贴板当前的文本数据。 - 将读取的数据与来源网址拼接,形成新的...

    js粘贴图片(可以显示或上传)仅支持IE11,chrome,firefox

    - 需要处理各种可能的错误情况,如用户没有权限访问剪贴板,或者剪贴板中没有图片数据等。良好的错误处理能提供更好的用户体验。 8. **安全与隐私**: - 使用剪贴板API时,务必尊重用户隐私,不要未经许可就读取...

Global site tag (gtag.js) - Google Analytics