这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript 实现点击按钮复制指定区域文本 (推荐) 的相关资料, 非常不错,具有参考借鉴价值,需要的朋友可以参考下
html5 的 webAPI 接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能,不需要依赖 flash。
代码如下:
- /* 创建range对象 */
- const range = document.createRange();
- range.selectNode(element); // 设定range包含的节点对象
- /* 窗口的selection对象,表示用户选择的文本 */
- const selection = window.getSelection();
- if (selection.rangeCount > 0) selection.removeAllRanges(); // 将已经包含的已选择的对象清除掉
- selection.addRange(range); // 将要复制的区域的range对象添加到selection对象中
- document.execCommand('copy'); // 执行copy命令,copy用户选择的文本
测试:
浏览器的版本号为我测试时使用的版本。
edge 浏览器、Chrome(v54.0.2840.99 m)、Firefox(v49.0.1)可用。
IE9、IE10、IE11 会弹出提示询问是否将文本粘贴到剪贴板上。
IE7、IE8 不支持该功能。
IOS10 的 Safari 浏览器可用。
根据反馈,IOS9 以下的 Safari 浏览器应该是不支持该功能的。
Demo:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <body>
- <article id="article">
- <h4>
- 公园一日游
- </h4>
- <time>
- 2016.8.15 星期二
- </time>
- <p>
- 今天风和日丽,我和小红去了人民公园,玩了滑梯、打雪仗、划船,真是愉快的一天啊。
- </p>
- </article>
- <button id="copy">
- 复制文章
- </button>
- <textarea style="width: 500px;height: 100px;" placeholder="试一试ctrl + v">
- </textarea>
- <script>
- function copyArticle(event) {
- const range = document.createRange();
- range.selectNode(document.getElementById('article'));
- const selection = window.getSelection();
- if (selection.rangeCount > 0) selection.removeAllRanges();
- selection.addRange(range);
- document.execCommand('copy');
- }
- document.getElementById('copy').addEventListener('click', copyArticle, false);
- </script>
- </body>
- </html>
以上所述是小编给大家介绍的 JavaScript 实现点击按钮复制指定区域文本,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0511/330192.html