• 做一个幸福的人,读书,旅行,努力工作,关心身体和心情。
  • 不管有没有人爱,也要努力做一个可爱的人。不埋怨谁,不嘲笑谁,也不羡慕谁,阳光下灿烂,风雨中奔跑,做自己的梦,走自己的路。

使用clipboard将网页的内容复制到剪切板中

编程 lcq 2年前 (2016-08-03) 702次浏览 0个评论

引子

在用HTML做一个小小的密码生成转换的工具的时候,我想点击复制按钮,就将生成的文本复制到剪切版中,方便粘贴。类似很多大代码块,也有这样的功能。于是Google了一下。找到了这个clipboard.js工具。记录一下,供以后自己使用。

a0f6fc46-349a-11e6-8c9b-c5fd58d9099c

使用方法

1、在https://github.com/zenorocha/clipboard.js/releases下载最新的版本。或者使用npm install clipboard(前提装Node.js啊)。

2、然后再dist目录下面找到clipboard.min.js。将文件引入到代码中即可。如:<script src=“dist/clipboard.min.js”></script>

3、根据你操作的对象初始化一个clipboard变量。如:var clipboard = new Clipboard(‘.btn’);”.btn”是元素的选择器。标记为class的话那么是”.btn”,如果是id的话那么就是”#btn”了。

4、设置好data-clipboard-target,data-clipboard-action,data-clipboard-text的值。data-clipboard-target是复制的目标。data-clipboard-action是复制的操作。有”cut”跟”copy”两个值可选。如果没有这个参数,默认为copy。data-clipboard-text是复制的内容。如果你复制固定的内容,那就没必要用data-clipboard-target了。用data-clipboard-text即可。

5、等上面的全部弄好之后,你可以在下面的事件里面进行接收查看。

样例

以下样例可以查看我写的一个测试例子Clipboard Demo

1、复制一个输入框的文本到剪切板中。

2、剪切一个Textarea里面的内容到剪切板中。

3、复制自己本身定义的值到剪切板中。

附一下整个demo的页面代码(注意:一定要按照自己的路径引入semantic,jquery等demo才能有效哦!)

参考文章

1、clipboard.js A modern approach to copy text to clipboard

2、github clipboard

3、使用clipboard.js复制页面内容到剪切板


乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明使用clipboard将网页的内容复制到剪切板中
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址