浏览器里点击复制到剪贴板的小方法

今天分享一个在浏览器里点击复制到剪贴板的小方法,经测试所有浏览器都没有兼容性问题,包括安卓和iOS,拿走不谢!

类似于这种需求:

现成的代码:

function copy() {    const input = document.createElement(‘input‘);    input.value = ‘想要复制的内容‘;    document.body.appendChild(input);    input.select();    if (document.execCommand(‘Copy‘)) {        document.execCommand(‘Copy‘);        console.log(‘复制成功!‘);    } else {        console.log(‘复制失败!‘);    }    input.style.display = ‘none‘;}

原文地址:https://www.cnblogs.com/lewiscutey/p/9260458.html

时间: 2024-10-10 22:05:56

浏览器里点击复制到剪贴板的小方法的相关文章

点击复制到剪贴板的方法( clipboard )

需求描述:点击复制可以把店铺链接复制到剪贴板上 解决方法: 使用clipboard 插件 安装 npm install clipboard --save 设置 在main.js 中引入, 当然我们也可以在用到的.vue中映入,因为不止在一个地方中用到了拷贝文字 import clipboard from 'clipboard';//注册到vue原型上Vue.prototype.clipboard = clipboard; 在需要拷贝文字的文件里面 <template> <div clas

JQery插件clipboard.js ----将文本复制到剪贴板的现代化方法

### 之前用了js自带的剪贴板对象clipboardData 对象以为就可以实现粘贴复制,但是种只支持IE的. 就找了jq的一个插件Zclip,但是网上的说法是利用了flesh来实现的,我用了之后可以实现,但是面对我自啊table的td中存在多个要实现粘贴复制的话,就会有问题了. 所以,才找了现在这个jqery的另一个插件,相对更好些,能够支持移动端的 ### 插件官网:https://clipboardjs.com/ 实现起来也很简单, 我就弄个例子: <!DOCTYPE html> &l

js实现将文本复制到剪贴板的现代方法

资源 推荐使用:clipboard.js 官方教程地址:https://clipboardjs.com/#example-text 官方github地址:https://github.com/zenorocha/clipboard.js/ 基本用法解答 1.data-clipboard-target  在触发器元素中添加属性来实现 new ClipboardJS('.btn') <input id="foo" value="我是被copy的值"> <

同一个接口里的数据,多处用小方法

1.有时获取一个后台接口,页面展示会多处用到,不用多次调用同一个接口,可以调用一次,把页面调用这个接口的数据,一下全展示出来: 如例: $("#bootServerList"), $("#designateServerList")两处都要用,可以仿照使用 apiGet(url,function (data) { if(data.status==0){ var html = '<ul class="bootServerList">' v

点击复制文字到剪贴板兼容性安卓ios

一般那种活动H5分享可能会用到点击复制文字到剪贴板,很简单的功能 于是搜了一搜:js复制文字到剪贴板,可用结果大致分为两类: 一类是js原生方法,这种方法兼容性不好,不兼容ios: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand 另外,还有一些坑要注意 input/textarea为disabled不可用(readonly可以) input/textarea为hidden不可用 try{ var copy

复制到剪贴板的JS实现--ZeroClipboard (兼解决IE下兼容问题)

相信绝大多数人都遇到过这样的功能实现,“复制”或者“复制到剪贴板”这样的功能.但是由于各大浏览器的实现方案不一样,导致几乎没有统一的实现这样功能的方案.而被各大程序猿喜欢的jQuery也没有类似的方法或者函数来实现这一功能.包括博客园这样的技术博客区对代码的复制,也没有直接复制到剪贴板,需要用户自己去手动ctrl+c.如下: 对于一般技术类的用户来说这没什么,但是对于那些非技术类的人来说,反而会觉得比较麻烦.因此从实用性和提高用户体验的角度出发,得给用户直接复制粘贴到剪切板的功能.今天介绍一个实

使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板. Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中. 然后把在你要使用复制功能的页面中引入Zero

黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)

两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能

【转】js实现复制到剪贴板功能,兼容所有浏览器

两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能