clipboard.js在移动端复制失败的解决方法

2024-09-29 13:05:47

1.前沿

一句话介绍下clipboard.js：实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。

在项目中使用clipboard.js插件去实现点击按钮，复制一段网址到剪切板的功能。功能做好后，一开始无论这pc端还是移动端都能正常使用。突然某一天测出了一个bug：移动端复制失败，pc端是ok的。简直一脸懵逼。。。

遇到这个bug，我第一个思考到的是，这是个常用的插件，网上应该有现成的解决方法。网友分享的方法是：把绑定data-clipboard-target属性的按钮标签从div换成button。亲测后，不起效果，可能不是一个原因导致的。通过摸索，找到了bug的原因和可解决方案。我相信，在移动端的项目中使用到clipboard插件，有很大的概率会踩到这个坑，

下面就讲讲解决这个bug的历程。

2、透过表象思考

思考：为什么随着项目的进行，复制功能会失效？我的猜想是：可能是全局禁用了一些默认事件，导致了clipboad.js内部实现复制功能与禁用的默认事件冲突，所以才复制失败。按这个猜想去排查的两个思路：

　　1、去看clipboard的源码了，找到复制功能的具体实现原理，与哪些事件和默认事件有关联，再去寻找冲突点。

　　2、业务代码中去排查，哪里做了全局事件的配置，这些配置一个个排查，找出影响了clipboad复制功能的配置。

第一种思路相对牛皮，学习了clipboard原理也是极好的。第二种，是比较笨拙的方法，但是有时候是比较有效的，有可能在少量的试验中就找到了bug点。但是经常是找不出来的，所以只可花少量的时间去试验第二种方法。其实，这里还有第三种思路，就是换一种方式去实现复制功能，可能新的实现方式不受影响，可兼容各平台。clipboard轮子已经造好了，就是为了解决复制功能兼容性为目标诞生的。毕竟还是要相信轮子的实力。通读文档，有两种方式去实现复制功能。

1、我使用的是方法1: html属性绑定。

如下：

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
 Cut to clipboard
</button>

这个就是出现上述bug所使用的方法。

2、改成了文档说明的另外一种实现方法2: js配置参数。如下：

new ClipboardJS('.btn', {
 text: function(trigger) {
  return trigger.getAttribute('aria-label'); // 返回需要复制的内容
 }
});

改成方法2后，成功解决了移动端复制失败的问题。到此为止，若不深究，bug已经被解决，任务完成。

3、寻找原因

可以说，“投机取巧”，花最小的代价，解决了bug。问题虽然解决了，但心有不甘，想找出bug出现的原因。回头认真看了下官方文档，在对方法的描述中，看到这么一段话：

大意就是：复制或者剪切操作之后会选中对象，这个对象会通过触发一些cases（事件）去捕获和反馈信息。

重点就是：第一行中的“what has been selected after a copy/cut operation”这句话。根据描述，复制后的对象是被选中状态（selected）的。

然后我立马想到一个事情。在我的项目中，之前有一个同事为了实现长按不选中文本的功能，把长按选中文本的功能全局禁用了。。。。。用的方法是以下css

// 禁止选中html,body{
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
 -webkit-touch-callout: none;
 -webkit-text-size-adjust: none;
 -webkit-tap-highlight-color: transparent;
 -webkit-user-select: none;
}

找到疑点，通过试验，确实是这个段css导致方法1在移动端复制功能失败。（为什么pc端不失效，移动端失效，这归属于兼容吧，具体原因还不懂。。。）

再回头思考，方法1方法2的区别。可大胆推测：方法1，受css：user-select的影响，应该跟内部实现原理有关。方法2，在new生成实例的时候传入text参数，通过js返回复制内容，所以不受css：user-select的影响。一切推测和表象，达成高度切合。到这里，我只能说，这只是一个强有力的推测。而这个推测是否完全成立，还得研究clipboard.js源码的实现原理，才能真正判断。

问题点找到，解决方案也有了。此bug暂告一个段落！！

舒服（放松脸）。。。。。

4、总结：

1、解决问题的思路有很多。按照逻辑思维，一般是根据问题的表象去分析问题，得出几种思路后，再去验证，最终解决问题。但有时候先不纠结于问题的表象和原因，条条大路通罗马，换一种方式去实现功能，也不错。不管哪种方式去解决，都有不一样的付出和收获。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

js实现点击按钮复制文本功能

最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板之前做过复制输入框的内容,原以为差不多,结果发现根本行不通尝试了各种办法,最后使了个障眼法,实现了下面的效果一.原理分析浏览器提供了 copy 命令 ,可以复制选中的内容 document.execCommand("copy") 如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用 copy 命令,将文本复制到剪切板但是 select() 方法只对 <input>
JavaScript实现复制内容到粘贴板代码

最近做了一个前端项目,其中有需求:通过button直接把input或者textarea里的值复制到粘贴板里.下面小编把我实现思路及代码分享给大家,大家可以直接引入项目中. 具体代码如下所示: function copyToClipboard(elem) { // create hidden text element, if it doesn't already exist var targetId = "_hiddenCopyText_"; var isInput = elem.tag
JS常见DOM节点操作示例【创建，插入，删除，复制，查找】

本文实例讲述了JS常见DOM节点操作.分享给大家供大家参考,具体如下: DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的文档对象模型. 节点:根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 1.整个文档时一个文档节点. 2.每个HTML元素是元素节点. 3.HTML元素内的文本是文本节点. 4.每个HTML属性是属
react.js组件实现拖拽复制和可排序的示例代码

在实现复制前,对之前的拖拽排序组件属性进行了修改. 摒弃了value中的content属性,拖拽组件暴露的render函数,利用这个属性进行组件内部子组件的渲染,这点主要是参考了蚂蚁金服的Ant design里面一些组件的设计. 为了实现Data和model的脱藕,和sortKey一样,组件增加codeKey属性. 拖拽复制的效果如下: 由于实现组件的核心是根据value数据来渲染页面,因此实现拖拽复制功能,只需要在"拖拽释放"的时候,将被拖拽方的数据放到当前目标所在的value数组中
jQuery实现简单复制json对象和json对象集合操作示例

本文实例讲述了jQuery实现简单复制json对象和json对象集合操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>www.jb51.net jQuery复制json</title> <script src="
基于js实现复制内容到操作系统粘贴板过程解析

一.如果只考虑IE浏览器,可以直接用原声js实现(兼容IE.谷歌.火狐等浏览器) if(window.clipboardData){ //清空操作系统粘贴板 window.clipboardData.clearData(); //将需要复制的内容复制到操作系统粘贴板 window.clipboardData.setData("Text", "要复制的内容"); } 二.如果是其他浏览器,上面的办法行不通,其他浏览器出于安全的考虑禁止js访问操作系统粘贴板. 这里需要
JavaScript复制内容到剪贴板的两种常用方法

常见方法查了一下万能的Google,现在常见的方法主要是以下两种: 第三方库:clipboard.js 原生方法:document.execCommand() 分别来看看这两种方法是如何使用的. clipboard.js 这是clipboard的官网:https://clipboardjs.com/,看起来就是这么的简单. 引用直接引用: <script src="dist/clipboard.min.js"></script> 包: npm install
JS插件clipboard.js实现一键复制粘贴功能

一键复制粘贴功能需要用到一个轻量级的JS插件:clipboard.js. 官网地址下载到本地后,将其放入项目中,直接引用即可.具体实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一键复制粘贴</title> <style> .transfer { width: 90%; margin: 20px auto; fon
clipboard.js在移动端复制失败的解决方法

1.前沿一句话介绍下clipboard.js:实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能. 在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能.功能做好后,一开始无论这pc端还是移动端都能正常使用.突然某一天测出了一个bug:移动端复制失败,pc端是ok的.简直一脸懵逼... 遇到这个bug,我第一个思考到的是,这是个常用的插件,网上应该有现成的解决方法.网友分享的方法是:把绑定data-clipboard-target
js input输入百分号保存数据库失败的解决方法

解决办法如下: 1.用ASCII码替换百分号和与符号 var remark = $("#remark").val(); remark.replaceAll("ASCII69","%").replaceAll("ASCII70","&"); //展示时需要对原先替换的进行还原展示 remark.replaceAll("%","ASCII69").replaceA
js针对图片加载失败的处理方法分析

本文实例讲述了js针对图片加载失败的处理方法.分享给大家供大家参考,具体如下: 在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error([[data],fn])这个函数: $("img").error(function(){ //当图片加载失败时,你要进行的操作 //$(this).attr('src','images/no_pic.jpg')
JS实现移动端双指缩放和旋转方法

js实现移动端双指缩放和旋转,具体代码如下所示: var initHeading = 0; var rotation = 0; var lastTime; function setGesture(el){ var obj={}; var istouch=false; var start=[]; el.addEventListener("touchstart",function(e){ if(e.touches.length>=2){ //判断是否有两个点在屏幕上 istouch=
php将图片保存入mysql数据库失败的解决方法

本文实例分析了php将图片保存入mysql数据库失败的解决方法.分享给大家供大家参考.具体分析如下: 图片保存数据库并不是一个明智的做法,我们多半是把图片保存到服务器,然后把图片地址保存到数据库,这样我们每次只要读出图片地址就可以显示了,但下面我还是来介绍一个图片保存到mysql数据库的问题解决办法,代码如下: 复制代码代码如下: require 'class/db.php'; $fileName = "a1.jpg"; $fp = fopen($fileName, "r&
微信小程序首页数据初始化失败的解决方法

一. 问题描述用户首次后再次进入小程序时,我们通常需要通过获取用户openid或unionid用作唯一标示与后台进行数据交流,初始化用户信息.当我们通过第三方服务器跟微信建立请求时,微信需要用户确认是否公开信息.如图1,从console可以看到,在请求的同时,我们的首页index已经加载完成,图中初始化数据显示为空.无论我们将请求信息写在app.js的onload中或者index.js中,当我们点击确认后,请求信息才执行success方法,将第三方服务器返回的数据处理,这样的因需要用户点击而产
php中mail函数发送邮件失败的解决方法

本文实例讲述了php中mail函数发送邮件失败的解决方法.分享给大家供大家参考.具体分析如下: php中mail函数是一个自带的发邮件的函数,但是如果你真的要使用mail函数来发邮件那必须是要给你系统安装sendmail组件才可以,下面我就碰到mail发送不了邮件的问题,下面一起来看看解决办法吧. 之前的那台服务器转移过来后,发现网站用mail()发送邮件发不了,但是发现sendmail明明已经安装,如果没有安装sendmail可以执行,代码如下: 复制代码代码如下: yum install
关于Webpack dev server热加载失败的解决方法

利用Webpack dev server作为热加载服务器时,出现以下错误: XMLHttpRequest cannot load http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not
Python中pyecharts安装及安装失败的解决方法

pyecharts 是一个用于生成 Echarts 图表的类库.Echarts 是百度开源的一个数据可视化 JS 库.这篇文章重点给大家介绍pyecharts安装失败的处理方法,具体详情如下: pyecharts库的安装 1.正常安装首先在打开终端输入以下命令:pip install pyecharts 在终端输入pip list查看是否安装成功测试程序: from pyecharts.charts import Bar bar = Bar() bar.add_xaxis(["衬衫"
关于C#连接SQL Server时提示用户登录失败的解决方法

在用C#开发windows端程序并连接SQL Server时有可能会遇到数据库登录失败的问题,报错现象如下图所示: 报错信息如下: System.Data.SqlClient.SqlException: '用户 '' 登录失败.' This exception was originally thrown at this call stack: [External Code] MyQQ.DataOperator.ExecSQL(string) in DataOperator.cs

clipboard.js在移动端复制失败的解决方法

相关推荐

随机推荐