JS实现内容复制功能

html-css05

JS实现内容复制功能,第1张

复制是一个使用频率特别高的操作，在网页中，一般可以选中要复制的内容，使用快捷键 ctrl+c 将内容复制到剪贴板。除了使用系统提供的快捷方式复制网页内容，我们还可以用JS实现复制，这得益于document的 execCommand('copy') 命令。 实现整个复制功能，需要以下三个步骤： 大部分HTML元素都有innerText和innerHTML两个属性，innerText属性返回文本内容，innerHTML属性返回标签元素。我们可以创建一个函数，用于获取需要返回的内容： 上面的selectText函数接收一个DOM元素，返回DOM元素的innerText属性值。 我们可以通过表单元素的select()方法选中内容，表单元素因为textarea限制少于input，所以推荐使用textarea。我们可以动态创建一个textarea元素，将textarea的value属性值设置为上面的innerText属性值，再执行textarea的select方法选中。 上面实现了选中，下面就可以实现复制功能了。 最后一步就可以用execCommand('copy')实现复制了，它可以复制浏览器中选中的文本，比如说上面被textarea选中的文本，复制之后记得移除textarea。 第二步和第三步可以优化一下，创建一个copy函数，函数参数设置为第一步需要复制的文本，返回值为复制的结果。 完整JS示例如下： 可以将上面的完整JS示例写入一个JS文件，将JS文件引入HTML中，通过JS点击事件来执行复制函数。 效果图：

首先要将自己要转换的HTML代码准备好。

然后进入 站长工具网 。百度搜索能找到，点击进入，选择“HTML/JS互转”

然后粘贴进去，得到相应的JS代码。

如果现在是直接放到网页中，直接将JS代码贴进去就行了。如果不是直接贴到记事本中。然后保存为JS文件。

然后我们得到JS文件，然后就可以直接上传了。