js点击复制到粘贴板
时间: 2024-07-10 15:01:17 浏览: 87
在JavaScript中,实现点击按钮快速复制文本到剪贴板的功能通常会利用`clipboard.writeText()`方法。以下是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Copy to Clipboard</title>
</head>
<body>
<button onclick="copyToClipboard('Hello, World!')">复制到剪贴板</button>
<script>
function copyToClipboard(text) {
if (window.clipboardWriteText) { // 判断浏览器是否支持该API
navigator.clipboard.writeText(text)
.then(function() {
alert('复制成功!');
})
.catch(function(err) {
console.error('复制失败:', err);
});
} else if (document.queryCommandSupported && document.queryCommandEnabled) { // 兼容旧浏览器
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed';
textarea.style.left = '-9999px'; // 隐藏输入框
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy'); // 使用DOM操作模拟复制
document.body.removeChild(textarea);
alert('复制成功!');
}
}
</script>
</body>
</html>
```
在这个示例中,当用户点击"复制到剪贴板"按钮时,会尝试将文本字符串`'Hello, World!'`复制到剪贴板。如果浏览器支持新的`navigator.clipboard` API,就直接使用它;如果不支持,则创建一个临时隐藏的`<textarea>`元素,选中文本并执行复制命令。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)