JS处理剪贴板

JavaScript017

JS处理剪贴板,第1张

IE 是第一个支持剪贴板相关事件及通过 JavaScript 访问剪贴板数据的浏览器。IE 的实现成为了事实 标准,这是因为 Safari、Chrome、Opera 和 Firefox 都实现了相同的事件和剪贴板访问机制,后来 HTML5 也增加了剪贴板事件 。

(1) beforecopy:复制操作发生前触发。

(2) copy:复制操作发生时触发。

(3) beforecut:剪切操作发生前触发。

(4) cut:剪切操作发生时触发。

(5) beforepaste:粘贴操作发生前触发。

(6) paste:粘贴操作发生时触发。

这是一个比较新的控制剪贴板访问的标准,事件的行为及相关对象会因浏览器而异。在 Safari、 Chrome 和 Firefox 中,beforecopy、beforecut 和 beforepaste 事件只会在显示文本框的上下文菜 单(预期会发生剪贴板事件)时触发,但 IE 不仅在这种情况下触发,也会在 copy、cut 和 paste 事 件之前触发。无论是在上下文菜单中做出选择还是使用键盘快捷键,copy、cut 和 paste 事件在所有 浏览器中都会按预期触发。

通过 beforecopy、beforecut 和 beforepaste 事件可以在向剪贴板发送或从中检索数据前修改 数据。不过,取消这些事件并不会取消剪贴板操作。要阻止实际的剪贴板操作,必须取消 copy、cut 和 paste 事件。

剪贴板上的数据可以通过 window 对象(IE)或 event 对象(Firefox、Safari 和 Chrome)上的 clipboardData 对象来获取。在 Firefox、Safari 和 Chrome 中,为防止未经授权访问剪贴板,只能在剪 贴板事件期间访问 clipboardData 对象IE 则在任何时候都会暴露 clipboardData 对象。为了跨浏 览器兼容,最好只在剪贴板事件期间使用这个对象。

clipboardData 对象上有 3 个方法:getData()、setData()和 clearData(),其中 getData() 方法从剪贴板检索字符串数据,并接收一个参数,该参数是要检索的数据的格式。IE 为此规定了两个选 项:"text"和"URL"。Firefox、Safari 和 Chrome 则期待 MIME 类型,不过会将"text"视为等价于 "text/plain"。

setData()方法也类似,其第一个参数用于指定数据类型,第二个参数是要放到剪贴板上的文本。 同样,IE 支持"text"和"URL",Safari 和 Chrome 则期待 MIME 类型。不过,与 getData()不同的是, Safari 和 Chrome 不认可"text"类型。只有在 IE8 及更早版本中调用 setData()才有效,其他浏览器会 忽略对这个方法的调用。

这里的 getClipboardText()函数相对简单,它只需要知道 clipboardData 对象在哪里,然后 便可以通过"text"类型调用 getData()。相应的,setClipboardText()函数则要复杂一些。在确定 clipboardData 对象的位置之后,需要根据实现以相应的类型(Firefox、Safari 和 Chrome 是 "text/plain",而 IE 是"text")调用 setData()。

如果文本框期待某些字符或某种格式的文本,那么从剪贴板中读取文本是有帮助的。比如,如果文 本框只允许输入数字,那么就必须检查粘贴过来的值,确保其中只包含数字。在 paste 事件中,可以 确定剪贴板上的文本是否无效,如果无效就取消默认行为,如下面的例子所示:

这个 onpaste 事件处理程序确保只有数字才能粘贴到文本框中。如果剪贴板中的值不符合指定模 式,则取消粘贴操作。Firefox、Safari 和 Chrome 只允许在 onpaste 事件处理程序中访问 getData() 方法。

因为不是所有浏览器都支持剪贴板访问,所以有时候更容易屏蔽一个或多个剪贴板操作。在支持 copy、cut 和 paste 事件的浏览器(IE、Safari、Chrome 和 Firefox)中,很容易阻止事件的默认行为。 在 Opera 中,则需要屏蔽导致相应事件的按键,同时阻止显示相应的上下文菜单。

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

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

<input type="text" id="copyText" value="" style="color:#fffbackground:#fffborder-color:#fffborder: 0position:absolutetop:-50pxleft:0" />

<script type="text/jscript">

//复制文本

function copyText(str)

{

if(str.length >0)

{

$("#copyText").val(str)

//复制文本

var input = document.getElementById("copyText")

input.value = str// 修改文本框的内容

input.select()// 选中文本

document.execCommand("copy")// 执行浏览器复制命令

//layer提示框

layer.closeAll('msg',{time:10000})

layer.msg('<span style="color:red">已复制:</span></br>'+str)

}

}

</script>

<a href="jscript:copyText('要复制的内容')">要复制的内容</a>

这是代码,这里的文本框不能设置隐藏,否则复制失效,所以我设置的样式让它在浏览器之外的地方,无法被看到