原生JS实现粘贴到剪贴板

Pikachu 发布于2019-08-22 15:06 / 2814人阅读

摘要：综上加两行如果不是等表单元素，不能使用和的话，那么我们可以使用和方法来模拟这个过程了，对象表示用户选择的文本范围或光标的当前位置，满足执行命令的可编辑活动区域，如下上述针对非，等表单元素也能实现了

本文主要讨论原生方法

目前常见的实现粘贴到剪贴板主要有以下两种方法：

第三方库 clipboard

原生JS, 主要是 document.execCommand方法

第一种方法按照文档说明，设置触发元素的data-clipboard-text 或者 data-clipboard-target即可，不做说明，详见文档

第二种方法：
document.execCommand

这个方法的兼容性其实不算很好，特别是移动端，具体这里有, 但clipboard针对部分机型也有问题，所以具体使用还是得看情况，使用该方法前要先看浏览器是否支持bool = document.execCommand("copy")

MDN对上述方法的解释如下：

当一个HTML文档切换到设计模式 designMode时，文档对象暴露 execCommand 方法，该方法允许运行命令来操纵可编辑区域的内容。

注意加粗部分，设计模式 ，即：使用前我们需切换文档模式为设计模式

document.designMode = "on"

完成运行命令之后再设置值为off
还有个加粗部分，可编辑区域 ，默认的input和textarea元素是可编辑(设置一个元素的contenteditable="true"也可激活元素的编辑模式)

先来看表单元素如何实现

ele.addEventListener("click", () => {
    document.designMode = "on"
    let bool = document.execCommand("copy")
    if (!bool) {
        alert("sorry, 手动复制吧")
    } else {
        let val = "something"
        let inputEle = document.createElement("input")
        document.body.appendChild(inputEle)
        inputEle.setAttribute("value", val)
        inputEle.setAttribute("readonly", "readonly")
        inputEle.select()
        document.execCommand("copy")
        document.body.removeChild(inputEle)
        alert("copied")
    }
    document.designMode = "off"
})

为避免出现光标或者拉起输入法，需要给元素设置readonly属性

inputEle.select()方法在一些浏览器中有时不能选中所有内容，这时需要利用inputeElement的setSelectionRange方法：

HTMLInputElement.setSelectionRange 方法可以从一个被 focused 的 
元素中选中特定范围的内容。

综上加两行：

...
inputEle.focus()
inputEle.setSelectionRange(0, inputEle.value.length)
document.execCommand("copy")
...

如果不是input等表单元素，不能使用select和setSelectRange的话，那么我们可以使用getSelection和createRange方法来模拟这个过程了，Selection对象表示用户选择的文本范围或光标的当前位置，满足执行execComman命令的可编辑活动区域，如下

let range = document.createRange()
let tar = document.querySelector("#code")
range.selectNodeContents(tar)
let selection = window.getSelection()
selection.removeAllRanges()
selection.addRange(range)
document.execCommand("copy")
selection.removeAllRanges()

上述针对非input，textarea等表单元素也能实现了

超融合服务器私有云 js复制到剪贴板 js复制到粘贴板原生js实现 ajax原生js实现

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

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

使用clipboard实现前端页面复制到粘贴板的功能

摘要：最近公司需要做一个实现复制的功能，本来以为会是很简单两三行代码的事，后来发现网上说的那些原生实现复制的方法很多浏览器因为安全的原因都不支持了，尝试了很长时间，还是死心了，决定使用第三方的库。最近公司需要做一个js实现复制的功能，本来以为会是很简单两三行js代码的事，后来发现网上说的那些原生js实现复制的方法很多浏览器因为安全的原因都不支持了，尝试了很长时间，还是死心了，决定使用第三方...

Astrian 2019-08-21 16:01 评论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
前端er怎样操作剪切复制以及禁止复制+破解等

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

DevTalking 2019-08-02 11:11 评论0 收藏0
前端培训-初级阶段-场景实战（2019-05-09）-聊天框-发送框

摘要：初级阶段已经完结，之后会针对之前提到过的内容，对实际场景进行分享。我们要讲什么聊天功能中的发送框的实现及一些常规操作的实现。以下接口都从继承其方法和属性返回一个包含该节点名字的。是获取剪贴板对象。所以不能直接人为替换剪贴板内容达到目的。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（H...

wuyangchun 2019-08-02 16:17 评论0 收藏0