这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 JS 实现复制内容到剪贴板功能的步骤方法,可兼容所有 PC 浏览器,不兼容手机端。具有一定的参考价值,下面跟着小编一起来看下吧
前记:本来原生的 JS 是有提供一个函数来实现这个功能 (window.clipboardData),但是很遗憾,这个函数仅仅支持 IE 和 FF 浏览器,所以基本用处不大。下边介绍的是一个第三方插件库 (ZeroClipboard.js)。
ZeroClipboard.js 在 Git 上的地址为:https://github.com/zeroclipboard/zeroclipboard
注意:此 js 库不支持兼容手机端 (包括 Android、IOS),仅支持 PC 端浏览器。
第一步:将插件库引入到工程中。
把 Git 上的 dist 目录 copy 到自己的目录中 (其实只需要 ZeroClipboard.js 和 ZeroClipboard.swf 就 OK~)
脚本文件引入:
- <script src="ZeroClipboard.js"></script>
第二步:初始化插件库。
- var clip = new ZeroClipboard( document.getElementById("d_clip_button"), {
- moviePath: "ZeroClipboard.swf"
- } );
第三步:上代码。
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- Zero Clipboard Test
- </title>
- <meta charset="utf-8">
- </head>
- <body>
- <!-- 说明: 1.data-clipboard-target 输入要复制的对象的ID -->
- <button id="d_clip_button" class="my_clip_button" data-clipboard-target="fe_text">
- <b>
- 复制到剪贴板
- </b>
- </button>
- <br/>
- <textarea id="fe_text" cols="50" rows="3">
- 输入需要复制的内容
- </textarea>
- </body>
- </html>
- <script type="text/javascript" src="ZeroClipboard.js">
- </script>
- <script type="text/javascript">
- //初始化复制对象
- var clip = new ZeroClipboard(document.getElementById("d_clip_button"), {
- moviePath: "ZeroClipboard.swf"
- });
- //复制内容到剪贴板成功后的操作
- clip.on('complete',
- function(client, args) {
- alert("复制成功,复制内容为:" + args.text);
- });
- </script>
以上示例代码注释中已经对 Zero Clipboard 的功能进行了介绍,需要了解更多的功能请到 https://github.com/zeroclipboard/ZeroClipboard
注意:运行环境必须在服务器环境下,否则看不到效果!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0703/328011.html