通过纯js代码实现将指定内容复制到粘贴板(兼容各主流浏览器)

1.业务需求：

vue项目需要通过点击button按钮将指定内容复制到粘贴板中，且不引入第三方组件。

2.解决方案：

js写法如下（这里是利用了浏览器对选中的input标签的复制功能，且兼容各主流浏览器）：

    // 复制操作函数（text:被复制的内容，可自定义）copyText(text) {let input = document.createElement('input') // 新增一个inputinput.style.position = 'relative' // 将它隐藏（注意不能使用display或者visibility，否则粘贴不上）input.style.zIndex = '-9'document.body.appendChild(input) // 追加input.value = text // 设置文本框的内容input.select() // 选中文本document.execCommand("copy") // 执行浏览器复制命令this.$message.success('已复制到粘贴板!')},

通过纯js代码实现将指定内容复制到粘贴板(兼容各主流浏览器)相关推荐

ios下js复制到粘贴板_h5实现一键复制到粘贴板兼容ios
实现原理采用document.execCommand('copy') 来实现复制到粘贴板功能复制必须是选中input框的文字内容,然后执行document.execCommand('copy') ...
用js实现复制内容到操作系统粘贴板(兼容IE、谷歌、火狐等浏览器)
一.如果只考虑IE浏览器,可以直接用原声js实现 if(window.clipboardData){//清空操作系统粘贴板window.clipboardData.clearData();//将需要复 ...
js点击按钮，自动复制到粘贴板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Snake贪吃蛇小游戏纯js代码
Snake贪吃蛇小游戏纯js代码先给个效果图,一样的简单而又纯朴,回归贪吃蛇最原始的状态还是先分析一下,使用面向对象编程真的降低了编程的难度(只要前期把思路想好,各个类,属性,方法抽象出来),就真 ...
点击复制内容到手机粘贴板（简洁易懂-只需五步）
点击按钮复制内容到手机粘贴板只需简单五步↓ 第一步 npm install clipboard --save 第二步在需要的页面引入(注:路径根据文件-/) 代码如下↓ <script> ...
VIM如何将全部内容复制并粘贴到外部
VIM如何将全部内容复制并粘贴到外部ubuntu默认安装的vim是不支持系统剪切.粘贴版的,需要执行以下安装: sudo apt-get install vim-gnome 注意要让vim支持系统粘贴 ...
js html保存word文档,js将页面中指定内容保存到WORD
在网页WEB中,我们可以借助JS代码,将页面中指定的内容或特定的局部内容,而不是整个页面,导出到WORD文档,进而可以通过WORD保存的方法,生成WORD文件. 通过这种方法,在导出的时候,如果是第一 ...
JS实现Web中指定内容的保存与打印功能
背景首先,说说文章的背景.最近手中的一个项目,由于需求中要求提供Web界面的打印功能,当然如果没有打印机,还可以提供保存到本地.项目组长把这个"小任务"分给了我.本着努力为组长分 ...
网页二维码生成器纯js代码带logo图纯前端合成
不能光看人家,自己的贡献一点.前天把这个账户要回来了,今天写一个贴. 通过在静态页面里,插入一段js代码,实现在页面上自动显示网址的二维码.最好放在body最后. 特点:二维码中心带有logo小图,可 ...

通过纯js代码实现将指定内容复制到粘贴板(兼容各主流浏览器)

通过纯js代码实现将指定内容复制到粘贴板(兼容各主流浏览器)

1.业务需求：

2.解决方案：

通过纯js代码实现将指定内容复制到粘贴板(兼容各主流浏览器)相关推荐

最新文章

热门文章