移动端js实现点击复制到剪贴板，【真正】兼容所有浏览器uc、qq、微信、手机自带等浏览器

查看demo
前言：在移动端上经常会遇到这样的需求，第一种就是点击复制当前页面的链接，第二种就是类似卡券的功能，需要复制密码等，之前需求太紧急，基本上都使用了clipboard.js ,使用方法也很简单：（这种办法也会有很多浏览器及机型是不支持的，只能来做降级处理，提示用户去手动复制，但是假如遇到复制卡券这种隐藏值得时候就有问题了，只能在不支持的时候提示及把值再放一遍，用于手动复制，虽然解决了但是还是不完美。）

    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">Cut to clipboard</button>var clipboard = new ClipboardJS('.btn');clipboard.on('success', function(e) {console.info('Action:', e.action);console.info('Text:', e.text);console.info('Trigger:', e.trigger);e.clearSelection();});clipboard.on('error', function(e) {console.error('Action:', e.action);console.error('Trigger:', e.trigger);});

也有比如ZeroClipboard等实现方式。当然了，今天来介绍的是之前在做项目的时候用到的办法，又重新用jquery做了一个插件版的，可以说兼容所有移动端浏览器，自己试了安卓华为自带浏览器、uc浏览器、qq浏览器、iphoneX上的safari浏览器、微信内置浏览器等（假如有不支持的留言告诉我），使用办法也很简单：

引入jquery

<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

引入js

<script src="https://www.love85g.com/cdn/copy/jquery.copy.min.js"></script>

使用办法：

$.copy({imgUrl:"success-tips.png", //分享图标地址text:"复制成功", //分享提示文案copyUrl:"", //自定义复制链接地址tipTime:2000, //分享提示消失时间copyId:"#copy"//复制按钮id
});

扩展：（单页面多个复制功能）

var data = [{"url":"www.baidu.com",},{"url":"www.qq.com",},{"url":"www.163.com",}];$.each(data,function(i,item){$("body").append('<button id="copy'+i+'">复制链接</button>');$.copy({imgUrl:"success-tips.png", //分享图标地址text:"复制成功", //分享提示文案copyUrl:item.url, //自定义复制链接地址tipTime:2000, //分享提示消失时间copyId:"#copy"+i //复制按钮id});
});

原文：https://blog.csdn.net/cssking0/article/details/85328897

移动端js实现点击复制到剪贴板，【真正】兼容所有浏览器uc、qq、微信、手机自带等浏览器相关推荐

移动端js实现点击复制到剪贴板，【真正】兼容所有浏览器uc、qq、微信、手机自带等浏览器...
移动端js实现点击复制到剪贴板,带提示,[真正]兼容所有浏览器,包括安卓和ios及uc.qq.微信.手机自带等浏览器. github,欢迎star: https://github.com/majian ...
Clipboard.js 实现点击复制
在开发过程中难免会遇到点击分享的需求,这里有两种实现方式: 第一种: 通过原生js 的方法用(存在兼容性): document.execCommand( aCommandName, aShowDefa ...
JS 将指定内容复制到剪贴板
除了使用一些插件(vue-clipboard2等等)来完成这个功能,其实使用原生JS就可以实现了: const data = 'xxx' // 需要复制到剪贴板的内容 const input = do ...
通过JS实现点击复制页面表格到Excel
本文基于react项目实现. 起因接了一个需求,要求实现点击页面上的一个按钮,复制某个表格数据,然后ctrl+V到Excel表格中. 思考其实我觉着这个功能用导出Excel的方式实现不就好了么.不 ...
JS实现点击复制目标内容
在实际应用中,我们经常看到这样一种效果:就是单击一个按钮,就将某个区域内的内容,复制到了剪切板中.其实这个功能实现起来也不难,核心就是用到了window子对象clipboardData的一个方法:se ...
H5移动端完美实现点击复制文本的解决方法，已经自测！
简介当文档对象被转换为设计模式的时候(选中,设置contentEditable等),文档对象提供了一个execCommand方法,通过给这这个方法传递参数命令可以操作可编辑区域的内容.这个方法的命令 ...
js实现点击复制链接功能
像这种复制链接的功能一般我们把他放在utils文件中. 代码如下: // 文本复制 export function copyText(value) { return new Promise((reso ...
js实现点击复制到粘贴板功能
HTML结构 <p class="DzWx"><span class="wx">微信:<span id="wxConte ...
js方法点击复制文本
copy(data) { //复制文本let url = data;let oInput = document.createElement('input');oInput.value = url;do ...

移动端js实现点击复制到剪贴板，【真正】兼容所有浏览器uc、qq、微信、手机自带等浏览器

移动端js实现点击复制到剪贴板，【真正】兼容所有浏览器uc、qq、微信、手机自带等浏览器相关推荐

最新文章

热门文章