今天给各位分享javascript剪贴板的知识，其中也会对js复制剪切板进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
1、js 剪切板的用法(clipboardData.setData)2、JavaScript如何点击实现复制文字到剪切板呢？3、JS处理剪贴板
js 剪切板的用法(clipboardData.setData)
经常看到这样一种效果：就是单击一个按钮，就将某个区域内的内容，复制到了剪切板中。其实这个功能实现起来也不难，核心就是用到了window子对象clipboardData的一个方法：setData()
语法：
参数：
返回值：复制成功返回true；失败返回false。
例如
提供了对剪贴板的访问。
三个方法
JavaScript如何点击实现复制文字到剪切板呢？
可以使用clipboard插件解决这个问题。
github里直接搜索clipboard就可以找到了。
该插件并不依赖jquery。直接引入即可使用。
使用方法：
这里的.btn是元素的class属性，可以使用任意id或者class以及元素节点名称来实例化插件。
默认会为元素绑定click事件，点击的时候会触发。
data-clipboard-target参数指定被复制内容的元素。
如上例，点击按钮后会将input的值“被复制的内容”几个字复制到剪切板中。
更多使用方法可以自行github查询。
JS处理剪贴板
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 中，则需要屏蔽导致相应事件的按键，同时阻止显示相应的上下文菜单。
关于javascript剪贴板和js复制剪切板的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
微信扫一扫 
支付宝扫一扫 
