js 操作剪贴板

plokmju88 发布于2019-08-23 16:23 / 1509人阅读

摘要：操作剪贴板官方说明通过可以操作剪贴板的复制剪切粘贴用到的方法和元素元素方法选中输入框中的所有文本选中输入框中的部分文本对选中的文本进行复制剪切粘贴操作实现原理是通过操作输入框，只能操作输入框，不能操作其它元素。

js 操作剪贴板

MDN 官方说明： https://developer.mozilla.org...

通过 js 可以操作剪贴板的复制剪切粘贴

用到的方法和元素

DOM元素

js 方法

// 选中输入框中的所有文本
inputElement.select()

// 选中输入框中的部分文本
inputElement.setSelectionRange(start, end)

// 对选中的文本进行 复制 / 剪切 / 粘贴 操作
document.execCommand("copy/cut/paste")

实现原理

是通过 js 操作 textarea input 输入框，只能操作输入框，不能操作其它元素。
所有的 复制／剪切／粘贴 都是要在选中输入框中的文本之后，才进行操作的。

具体例子

写个例子展示一下

HTML

测试内容：
ABCDEFGHIJKLMNOPQRSTUVWXYZ

js 就直接在 console 中进行调试了

用 shift + enter 在 console 中换行输入指令

// 选中文本
var text = document.querySelector("#text");
text.focus();
text.setSelectionRange(3,13);

// 操作文本
document.execCommand("cut")

选中后的样子

执行剪切操作后，再手动粘贴到下面的输入框中

就是这样了。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102972.html

Clipboard.js：不用Flash实现剪贴板功能的轻量级JavaScript库

摘要：发布了一个专门用于从页面向本地计算机的剪贴板复制文本的库。用库来实现这一功能，问题是这个库是用一个不可见的来完成剪贴操作，而技术正被各大浏览器厂商冷落，所以势必要有一个新的方案。 showImg(https://segmentfault.com/img/bVso8J); Zeno Rocha发布了一个专门用于从web页面向本地计算机的剪贴板复制文本的JavaScript库：Clipb...

phodal 2019-08-19 17:27 评论0 收藏0
JS实现将图片复制到剪贴板

摘要：前言最近项目新增需求用户能够拖拽页面上的图片文件到文档。在现有的拖拽事件所提供无法满足需求的情况下，换一个思路走尝试将图片复制到剪贴板。只复制目标节点的子节点，对于标签，如果不额外包裹一层父元素，无法实现图片复制。前言最近项目新增需求：用户能够拖拽页面上的图片文件到word文档。当操作浏览器里拖拽图片至别的程序，在word文档中展示出获取到的只是图片的url地址，而非预期的图片文件...

MageekChiu 2019-08-22 18:02 评论0 收藏0
JavaScript复制内容到剪贴板

摘要：原文链接最近一个活动页面中有一个小需求，用户点击或者长按就可以复制内容到剪贴板，记录一下实现过程和遇到的坑。完整代码如下复制成功总结以上就是关于如何实现复制内容到剪贴板，附上几个链接兼容性原文链接：https://github.com/axuebin/ar... 最近一个活动页面中有一个小需求，用户点击或者长按就可以复制内容到剪贴板，记录一下实现过程和遇到的坑。常见方法查了一下...

ideaa 2019-08-22 14:54 评论0 收藏0
前端er怎样操作剪切复制以及禁止复制+破解等

摘要：取消默认的复制事件被复制的文字等下插入防知乎掘金复制一两个字则不添加版权信息超过一定长度的文字就添加版权信息作者链接来源掘金著作权归作者所有。以上参考资料高程操作剪贴板网页上如何实现禁止复制粘贴以及如何破解原生实现点击按钮复制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

mikasa 2019-08-29 16:20 评论0 收藏0
前端er怎样操作剪切复制以及禁止复制+破解等

摘要：取消默认的复制事件被复制的文字等下插入防知乎掘金复制一两个字则不添加版权信息超过一定长度的文字就添加版权信息作者链接来源掘金著作权归作者所有。以上参考资料高程操作剪贴板网页上如何实现禁止复制粘贴以及如何破解原生实现点击按钮复制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

amuqiao 2019-08-23 10:51 评论0 收藏0