clipboardjs 是一个不需要flash，将文本复制到剪贴板的插件。简单介绍下基本运用。
<pre>
<script src="js/clipboardminjs"></script>
</pre>
首先需要您需要通过传递DOM选择器，HTML元素或HTML元素列表来实例化它。
<pre>
new Clipboard('btn');
</pre>
1用一个元素当触发器来复制另一个元素的文本,data-clipboard-target属性后需要跟属性选择器
<pre>
<input id="foo" value=">
如果想去给这些并不是由你控制动态生成出来的元素绑定事件应该是不可能的。
但是可以给顶层的document绑定事件来判断点击的是哪个元素。
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=10">
<meta >
如果你是想鼠标选中后点击复制到文本框内，其实不用剪贴板，可以获取选中的内容，然后在复制给文本框就可以了
>
屏幕截图是 *** 作电脑最长用到的，相信大家已经驾轻就熟了，但是对于整个页面的完整截图就不一定那么熟悉了。使用Chrome浏览器 上网看到有用的文字，需要截图保存只能截取部分，无法截取整个页面，怎么办？其实大家可以使用chrome截图整个网页，下面和大家说说具体 *** 作方法。
1、升级Chrome到最新版本
参考下面经验"如何离线安装Chrome最新版本或某一特定版本？"，将Chrome升级到最新版本。
42如何离线安装Chrome最新版本或某一特定版本？
2、 下载FireShot扩展程序
3、安装FireShot扩展程序。
4、使用FireShot截图
浏览网页，按下FireShot扩展程序图标，在d出菜单中选择：捕捉整个页面、捕捉可见部分或捕捉选定区域即可。
5、 保存截图到文件
FireShot会打开一个新的标签页，上面显示截图，下面显示保存截图选项，可以保存到文件，或另存为pdf。
6、保存截图到剪贴板
在截图上面点右键，d出菜单上选择"复制"就可以将截图复制到剪贴板上了。
7、FireShot选项设置
点击FireShot图标，d出菜单上选择"选项"，进行FireShot选项设置功能，可以设置格式、截图热键、输出文件夹等选项。
8、对截图进行编辑
点击选项设置功能中的"安装先进功能"，就可以安装FireShot截图编辑插件，界面是英文版的，英文不好的可以跳过了。
上述我告诉大家如何使用chrome截图整个网页，掌握此方法对 *** 作电脑有很大帮助的！
很酷吧，相信经常在网上复制粘贴的人应该不陌生，我也是经历过，觉得很神奇，所以就寻思着是不是也在自己的博客里面也实现这个功能，经过一番查资料于研究，我总算弄明白了其中的原委，并实际应用于我的博客，你可以复制我粘贴试试，觉得酷的话就可以往下接着看了！下面来看一下实现过程。这里说明一下，浏览器版本较低的话可能`addEventListener()`不支持，特别是IE浏览器，IE8以前包括IE8的版本都不支持此方法。
当用户选中某段内容时windowgetSelection()获取一个Selection对象，将这个`objSelectiontostring()`，就是选中区的内容，这里可以用` var selectionString = windowgetSelection()toString()`在控制台查看，能在控制台查看说明我们就可以通过js获取到，selectionString + '自定义内容'，到这里复制的原内容我们就有了。这里我们要创建一个DOM容器来存`objSelectiontostring()`，最好是可以换行的，如p、div、textarea等。
当一个HTML文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来 *** 纵可编辑内容区域的元素，这里主要用其中的copy命令来实现复制功能，听说插件Clipboardjs也是调用这个方法实现复制功能的`bool = documentexecCommand(aCommandName, aShowDefaultUI, aValueArgument)`，第一个参数是命令的名称，字符串类型，后两个参数我们可以不用，返回bool值，如果是 false则表示 *** 作不被支持或未被启用命令只介绍用到的copy命令:
> copy：拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。
这是很重要的一步，这是复制内容的关键命令。这里我们只需要在正确的时间执行`documentexecCommand('copy')`即可。
addEventListener()方法用于向指定元素添加事件句柄，这里我就抛开文档，就针对本次功能对这个HTML DOM方法进行通俗的解释了，这里主要用来规定我们自定义复制功能的有效DOM范围，来个例子：
//body中有<div id="test">content</div>
var el = documentgetElementById('test');
eladdEventListener('copy', function (e){
// 触发copy事件后的处理
}
这个例子中我们实现的功能将只在id为test的DOM元素里有效，其它地方将恢复默认复制功能。
Range表示包含节点和部分文本节点的文档片段。用`var range = documentcreateRange()`方法创建，这里面为什么要创建Range呢，主要是用来存储Selection对象的开始位置和终点位置，因为我们是要阻止默认的copy事件，让copy的内容是用户选中的内容加上我们自定义的内容，再将这个内容放入粘贴板，形成最终的粘贴内容。`documentcreateRange`得到是还没有放内容的片段，我们我们还会用到`RangesetStart()`设置Range的起点和`RangesetEnd()`设置Range的终点。最终`selectionObjremoveAllRanges()`将selectionObj中的默认Range 去掉，`selectionObjaddRange(range)`,粘贴板就有了，不出意外去粘贴就会有选中的内容加自定义的内容了。
源码可以联系作者。这里有个特别注意的点，如果是原生js的话直接调用函数就可以，如果是vuejs的话中可以看到，我是在mounted()钩子函数里调用，而不是在created()钩子函数里调用，这里一定不能在created()钩子函数里调用，为什么呢？
因为created()执行的时候一般是在html渲染前的 *** 作，此时el还是undefined，所以执行getElementById()就会报错，created()适合做html渲染前的数据初始化工作。而mounted()一般是在html渲染完成后的 *** 作，此时el，data都已经加载完成，一般对dom的 *** 作都写在mounted中，这是个要注意的点，喜欢的话就给作者点个心，谢谢
可以用 js 给页面中的元素绑定 paste 事件的方法，当用户鼠标在该元素上或者该元素处于 focus 状态，绑定到 paste 事件的方法就运行了。
绑定的元素不一定是 input ，普通的 div 也是可以绑定的，如果是给 document 绑定了，就相当于全局了，任何时候的粘贴 *** 作都会触发。
谷歌浏览器（Google Chrome）的代码复制基本上是通过在源代码编辑器中编写JavaScript，HTML，CSS来实现的。 *** 作步骤如下：
1打开谷歌浏览器，然后点击右上角的“设置”按钮，在下拉菜单中选择“更多工具”，然后点击“开发者工具”。
2在开发者工具窗口中，点击“源代码编辑器”按钮，然后编写JavaScript，HTML，CSS代码。
3编写完成后，点击右上角的“保存”按钮，然后点击“复制”按钮，将代码的文本复制到剪贴板中。
4最后，在需要使用的地方粘贴剪贴板中的文本，即可完成代码复制。
以上就是关于clipboard.js基本使用全部的内容，包括:clipboard.js基本使用、JS实现内容复制功能、Chrome扩展如何获取JS动态生成的网页元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）