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实现点击按钮复制指定区域文本，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
本文向大家介绍js实现点击按钮复制文本功能，包括了js实现点击按钮复制文本功能的使用技巧和注意事项，需要的朋友参考一下 最近遇到一个需求，需要点击按钮，复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容，原以为差不多，结果发现根本行不通 尝试了各种办法，最后使了个障眼法，实现了下面的效果 一、原理分析 浏览器提供了 copy 命令 ，可以复制选中的内容 如果是输入框，可以通过 selec
-
本文向大家介绍Android实现按钮点击效果，包括了Android实现按钮点击效果的使用技巧和注意事项，需要的朋友参考一下 1、首先创建一个按钮 2、1中创建的按钮的background用到了btn_st,在drawable下创建btn_st 3、在2中用到的color1和color2，在values的strings中添加 4、java代码 （1）首先获取button Button click
-
我开始用GUI制作Java计算器，但我遇到了一个问题。我是Java新手，如果我的问题很愚蠢，我很抱歉。我想知道如何正确地为Action Listener编写代码，这样我就可以按下一个按钮，并将该按钮上的文本显示在文本区域中。所有评论都是我试图做的，但没有成功。
-
本文向大家介绍原生js实现点击按钮复制内容到剪切板，包括了原生js实现点击按钮复制内容到剪切板的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js点击按钮复制内容到剪切板的具体代码，供大家参考，具体内容如下 效果图 上代码 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
我在pygame中为点击事件制作了按钮，但存在一个问题。当我单击鼠标按钮并在按钮边界之间移动鼠标时，单击事件会重复自身。我只想单击一下，直到松开鼠标按钮。我该怎么做？
-
本文向大家介绍vue实现点击按钮下载文件功能，包括了vue实现点击按钮下载文件功能的使用技巧和注意事项，需要的朋友参考一下 项目中需要用到文件下载功能,查了资料发现需要用到a标签的特性,但是这边需要用到点击按钮下载,懒得写样式,于是用了以下代码. 在el-button的外面套了一层el-link,如下图,可以正常下载 以下是el-link文字链接的属性 总结 以上所述是小编给大家介绍的vue实现点
-
本文向大家介绍javascript实现点击后变换按钮显示文字的方法，包括了javascript实现点击后变换按钮显示文字的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript实现点击后变换按钮显示文字的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的javascript程序设计有所帮助。
-
我有一个输入，并想使有一个复制链接旁边它的标签。 当我单击“复制”时，我不仅想复制输入值，而且还想预置更多文本。 + 我该怎么做？ 使用上面的代码，只复制值。