php clipboard.js,clipboard.js用html页面复制信息到剪切板
时间: 2023-11-11 07:04:29 浏览: 145
要使用 Clipboard.js 实现复制信息到剪切板,需要先在 HTML 页面中引入 Clipboard.js 库,例如:
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
```
接着,可以在页面中添加一个按钮或链接,并设置其 `data-clipboard-text` 属性为需要复制的文本内容,例如:
```html
<button class="btn" data-clipboard-text="要复制的文本内容">复制到剪切板</button>
```
最后,在 JavaScript 中初始化 Clipboard.js 实例,并通过 `new ClipboardJS()` 方法绑定到需要复制的按钮或链接上,例如:
```javascript
<script>
var clipboard = new ClipboardJS('.btn');
</script>
```
完整的示例代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复制到剪切板</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
</head>
<body>
<button class="btn" data-clipboard-text="要复制的文本内容">复制到剪切板</button>
<script>
var clipboard = new ClipboardJS('.btn');
</script>
</body>
</html>
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)