clipBoardEvent, execCommand等粘贴板相关研究

最新推荐文章于 2024-06-15 09:31:50 发布
原创 最新推荐文章于 2024-06-15 09:31:50 发布 · 6.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#clipBoard #前端 #js

本文探讨了在Web开发中如何利用execCommand和clipBoardEvent来处理粘贴板内容，尤其是在尝试实现手机与PC文件互传的场景下。尽管execCommand('copy')可用于复制，但由于安全原因，无法直接通过JS实现粘贴功能。Firefox支持clipBoardEvent，但其他浏览器不支持，且模拟粘贴事件无法访问系统粘贴板内容。目前，Web中粘贴功能仍存在限制。

起因

这几天想研究一个手机与PC互传文件的WEB，构想是通过一个页面，以最简便的方式，各自可以把粘贴板内的内容读取出来，传递给对方。折腾许久，除了读取粘贴板内容，其他的都已经实现。于是研究起来。

execCommand

想起前一段做的CHROME扩展，那时研究的不够彻底，断言无法使用粘贴板。如果那时跳入execCommand这个坑，研究明白，就不会有今天的折腾。
首先 execCommand('copy') 是可以完成复制的，只要先设置选定区域。百般尝试，execCommand('paste') 是无法使用的，经过GOOGLE了许多官方文档，此方法暂时是无法实现的，也就是说，粘贴当前粘贴板的内容，是无法使用JS代码实现的，只有使用CTRL + V和右键菜单里的粘贴。
具体可见CANIUSE里的PASTE事件各浏览器支持列表与W3C cliPboard Api draft

P.S. 补充一点，execCommand(‘copy’)必须由用户实际操作才能触发，比如放在函数体内，绑定在按钮上；而且通过模拟DOM点击，是无法触发复制效果的。

<input type='text' id='testInput'
最低0.47元/天 解锁文章
Drop Api ClipboardEvent 和 DataTransfer
aXin_li的博客
12-11 1286
在一个拖拽操作*中，*每一个 drag event 都有一个dataTransfer 属性，它包含一个存有拖拽数据的 list ，其中每一项都是一个 DataTransferItem。此方法不会从拖动操作中删除文件，因此如果有任何文件包含在对象的 DataTransfer.types 列表中，仍然可能有一个类型为“Files”的条目在拖动。** DataTransferItemList ** 只有一个属性 ** length** ， 表示列表中拖动项的数量。包含数据传输中可用的所有本地文件的列表。
前端 JavaScript 复制粘贴的奥义——Clipboard 对象概述
编程三昧
06-22 804
前言 作为一名资深搬砖工，你要问我用得最熟练的技能是什么，那我敢肯定且自豪的告诉你：是 Ctrl+C ！是 Ctrl+V！ 不信？你来看看我键盘上的 Ctrl、C 和 V 键，那油光发亮的包浆程度，不盘个三五年是绝对达不到的！ 编程界的江湖上曾经流传着一句话：CV da fa 好，CV da fa 妙！主要看疗效，谁用谁知道！（为防河蟹，且用拼音凑合着） 从这句话就可以看出编程界的同仁们对 CV 的追捧和狂热，简直是席卷大街小巷、风靡大江南北！一时之间，不知让多少 IT 英雄们“竞折腰”，即使到了现在，它
node-clipboard-event:NodeelectronNW.js的剪贴板更改事件
05-24
节点剪贴板事件 Node.js / Electron.js / NW.js的剪贴板更改事件 笔记： 没有被轮询 用法 const clipboardListener = require('clipboard-event'); // To start listening clipboardListener.startListening(); clipboardListener.on('change', () => { console.log('Clipboard changed'); }); // To stop listening clipboardListener.stopListening(); 动机 学分 Linux- //stackoverflow.com/a/44992967 Windows- ://gist.github.com/glombard/7986
JavaScript 技术篇-chrome利用ClipboardEvent写入剪切板，chrome写入剪切板不成功解决方法
小蓝枣的博客
07-09 6024
JavaScript 技术篇-chrome利用ClipboardEvent写入剪切板，chrome写入剪切板不成功解决方法。 开始用 ClipboardEvent 怎么也不成功，后来仔细阅读开发文档才发现，需要通过 document.execCommand() 来执行 copy、paste 和 cut 命令，进而触发 ClipboardEvent 事件，才成功的。 我的 el 是绑定的某个 dom 节点，你可以直接替换为 document 也可以。
史上最详细的DOM事件之剪贴板事件
qq_39155611的博客
05-30 571
史上最详细的DOM事件之剪贴板事件 上篇博客讲了DOM的表单事件，这篇博客我们来讲一讲DOM的剪贴板（ClipboardEvent）事件。 HTML代码： <div id="box">hello world</div> <p>这是一个段落标签</p> <input type="text" id="text"> 1.oncopy(赋值)事件 var oBox = document.getElementById("bo
购物车数量加减按钮(AmmountView)使用手册
gitblog_00078的博客
06-15 717
购物车数量加减按钮(AmmountView)使用手册 1. 项目目录结构及介绍 此开源项目AmmountView位于hiwhitley/AmmountView，专为Android应用设计，提供一个直观易用的购物车数量调整组件。下面是对项目主要目录结构的解析： AmmountView/ ├── src │ └── main # 主要代码区域 │ ├── java ...
【剪贴板操作最佳实践】：提升用户交互体验的JavaScript秘籍（附案例研究）
[【剪贴板操作最佳实践】：提升用户交互体验的JavaScript秘籍（附案例研究）](https://codebeautify.org/blog/images/how-to-convert-base64-to-image-using-python.webp) # 摘要 随着互联网技术的飞速发展，剪贴板...
跨平台实现HTML元素复制到剪贴板的jquery插件
这些API通过`document.execCommand`方法和新的ClipboardEvent事件（如`copy`, `cut`, `paste`）来控制剪贴板操作。在以前，这样的操作通常只能通过浏览器插件或者ActiveX控件来实现，因此HTML5的剪贴板API极大地方便...
前端vue3怎么将段落带格式复制到剪切板上，没有图片，提供完整代码
最新发布
05-12
总结来说，需要提供一个安全、简洁且功能完备的Vue3组件代码，实现带格式段落的复制，同时处理输入和粘贴事件，确保内容安全，并正确使用剪贴板API。需要验证代码的每个部分，确保没有遗漏或错误，并添加清晰的注释...
JS操纵剪切板
汤一飞
09-27 320
文章目录文本文件(图片) 文本 如果是 textArea 或 input Text 之类的可以使用 select 方法选中文本的 DOM 元素 DOM元素.select(); if (document.execCommand('Copy')) { // 提示已经复制 } else { // 提示不能复制 } 如果不是 设置一个隐藏的可以 select() 的 DOM 元素,用户点击复制按钮或者其他操作时,动态把目标文字复制给隐藏 DOM 元素的 value ,随后同上. DO
Clipboard 剪贴板学习笔记
黄彪博客
01-05 2918
Clipboard.read()方法用于复制剪贴板里面的数据，可以是文本数据，也可以是二进制数据（比如图片）。由于用户可能把敏感数据（比如密码）放在剪贴板，允许脚本任意读取会产生安全风险，所以这个 API 的安全限制比较多。ClipboardItem 接口是对剪切板里的内容的抽象，比如我们选中网页上的一段文字，并右击选择复制，Clipboard.write()方法用于将任意数据写入剪贴板，可以是文本数据，也可以是二进制数据。用户使用剪贴板数据，进行粘贴操作时，会触发paste事件。
你不知道的copy、cut、paste事件——实现页面内容禁止复制，实现复制内容添加额外字段，比如复制请注明出处
zyz00000000的博客
11-30 4648
聊聊copy复制、cut剪切、paste粘贴事件。 首先这三个事件都属于ClipboardEvent事件（剪切板事件）。复制、剪切、粘贴事件是浏览器对事件的监听，可以监听处理。但是默认情况下浏览器操作系统是可以复制、剪切、粘贴页面上的内容，将数据处理到操作系统的剪切板上。 比如：window系统的 Win+V快捷键可以展示剪切板。。。浏览器页面内容的复制、剪切、粘贴，正是浏览器操作系统的低层实现。 我们也可以通过监听浏览器的copy、cut、paste事件，从而阻止默认的复制内容行为。比如有的网站，不
JS封装复制文本内容到剪贴板的方法
qq_39280289的博客
12-18 1648
模拟用户操作，调用document.execCommand("copy")的API，这里提供两种思路，一种是强制给ClipboardEvent对象强制写入值，但注意要阻止默认事件，否则会被复写。另一种思路是创建一个文本选区，然后再执行document.execCommand("copy")复制文本，这个实现和用户实际操作非常接近了，以下提供两种方法。假如我们创建的dom是input元素，还可以取一个巧，调用dom的API——select方法，可以直接创建一个本文选区，可以少写一些代码。
剪贴板操作 Clipboard API 教程
君子不卿
10-24 531
其次，它是同步操作，如果复制/粘贴大量数据，页面会出现卡顿。有些浏览器还会跳出提示框，要求用户许可，这时在用户做出选择前，页面会失去响应。注意，复制操作最好放在事件监听函数里面，由用户触发（比如用户点击按钮）。为了解决这些问题，浏览器厂商提出了异步的 Clipboard API。首先，它只能将选中的内容复制到剪贴板，无法向剪贴板任意写入内容。，就会将剪贴板里面的内容，输出到当前的焦点元素中。是操作剪贴板的传统方法，各种浏览器都支持。，选中的文本就会进入剪贴板。复制时，先选中文本，然后调用。
document.execCommand()用法说明
我的地盘
06-23 1679
document.execCommand()用法说明2D-Position 允许通过拖曳移动绝对定位的对象。AbsolutePosition 设定元素的 position 属性为"absolute"(绝对)。BackColor 设置或获取当前选中区的背景颜色。BlockDirLTR 目前尚未支持。BlockDirRTL 目前尚未支持。Bold 切换当前选中区的粗体显示与否。BrowseMode 目
JavaScript：实现复制粘贴剪切功能
热门推荐
lalala_dxf的博客
12-30 3万+
ClipboardAPI是下一代的剪贴板操作方法，比传统的方法更加强大、更合理。
vue使用clipboard插件实现文本复制
上好佳的博客
07-01 389
本例应用场景为，二维码链接复制 1.安装 npm install clipboard --save 2.新建js文件 clipboard.js import Vue from 'vue' import Clipboard from 'clipboard' function clipboardSuccess() { Vue.prototype.$message({ message: '复制成功', type: 'success', duration: 1500 ..
JavaScript 粘贴事件 paste
LonewoIf的博客
05-30 4750
兼容性： 给页面中的元素绑定paste事件的方法，当用户鼠标在该元素上或者该元素处于focus状态，绑定到paste事件的方法即可，绑定的元素不一定是input，普通的div也是可以绑定的，如果是给document绑定了，就相当于全局了，任何时候的粘贴操作都会触发。 document.addEventListener("paste", function (e){ var cbd = e.cli...
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值