password
查看人数
type
status
date
slug
summary
category
icon
tags
作者
状态
实现页面复制按钮可以采取以下步骤:
1. 添加一个按钮元素,设置id为copyButton:
2. 获取要复制的内容元素,这里假设是id为content的元素:
3. 为按钮元素绑定点击事件,在事件中执行复制操作:
4. 使用document.execCommand("copy")方法执行复制操作:
5. selection.selectAllChildren(content)方法选中内容元素内所有子节点:
6. 合并以上步骤,完整代码如下:
这段代码实现了一个点击按钮就可以复制内容元素内所有内容的效果
如果只想把特定的字符串内容添加到剪切板,而不是选中的DOM元素内容,可以这样实现:
1. 为按钮绑定点击事件
2. 在点击事件中调用 execCommand("copy") 方法
3. 在调用这个方法前,设置剪切板的数据 clipboardData
4. 设置 clipboardData 的 text 属性为你想复制的字符串内容代码示例如下:
这个方法的原理是:首先我们通过 Navigator.clipboard 获取浏览器剪切板接口然后调用 setData() 方法在剪切板上设置 text 属性,也就是字符串内容此时,剪切板上就有我们设置的字符串数据最后执行 execCommand("copy") 命令,这会自动复制剪切板当前选区的数据
注意：
document.execCommand("text")这个方法已经弃用，新版用剪切板添加文本用：
- 作者:躁静有徒
- 链接:https://blog.zaojingyoutu.top//article/7f7b7b9c-88e0-7ce2-f3fa-5a1b2c48760f
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
相关文章