分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

clipboard.js存在的问题

发布时间:2023-09-06 01:58责任编辑:赖小花关键词:js

clipboard.js  是一个复制到剪贴板的库。

github:https://github.com/zenorocha/clipboard.js

兼容性:IE9一下不支持。

再做微信端的项目接到了一个需求。点击按钮把指定的内容复制到剪贴板中。

刚开始用的是:document.execCommand("Copy"); 大部分的属性只有IE支持。比如:贴贴。

想了想我只用复制而且用的是微信端。只要安卓和苹果支持能够使用就可以了。

<input type="text" id="contents" value="测试复制"><a id="but" onclick="jsCopy()">点击复制</a><script type="text/javascript"> ???function jsCopy(){ ?????var e=document.getElementById("contents");//对象是contents ?????e.select(); //选择对象 ?????tag=document.execCommand("Copy","false",null); //执行浏览器复制命令 ?????if(tag){ ???????alert(‘复制内容成功‘); ?????} ???}</script> ??

emmmmmmm。缺点就是:必须要一个input文本框才能使用。而且还不能display:none隐藏掉。必须opacity。

有点坑,先测试,安卓华为:成功。苹果5:失败。

苹果失败了那就pass掉。

从网上找找有没有库。ZeroClipboard.js

这个库通过加载一个 Flash 来实现的。这个我是拒绝的。不过后来测试了一下。安卓成功,苹果失败。(可能没仔细研究)

再找:

Clipboard.js 。体积少,没有引入乱七八糟的东西。我比较喜欢。

 <a id="but" >点击复制</a>

<script type="text/javascript"> ???var clipboard = new Clipboard(‘#but‘, { ???text: function() { ???// 如果想从其它DOM元素内容复制。应该是target:function(){return: }; ?????return ‘测试复制‘; ???} ?}); ?clipboard.on(‘success‘, function(e) { ???alert("复制成功"); ?}); ?clipboard.on(‘error‘, function(e) { ???alert("复制失败"); ?});</script>

结构比较明确。new一个实例。然后调用方法。

再测试,安卓:成功。 苹果:失败。

why!!!!!

从网上找:

想让苹果支持这个功能。元素只能为button标签。其它均不成。

 <button id="but" >点击复制</button><script type="text/javascript"> ???var clipboard = new Clipboard(‘#but‘, { ???text: function() { ???// 如果想从其它DOM元素内容复制。应该是target:function(){return: }; ?????return ‘测试复制‘; ???} ?}); ?clipboard.on(‘success‘, function(e) { ???alert("复制成功"); ?}); ?clipboard.on(‘error‘, function(e) { ???alert("复制失败"); ?});</script>

 成功!。

clipboard.js存在的问题

原文地址:https://www.cnblogs.com/xf-zhao/p/9146150.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved