js中鼠标放到文本上给个复制功能
时间: 2024-02-16 13:03:32 浏览: 24
你可以使用以下代码实现在鼠标放到文本上时,点击触发复制功能:
```javascript
// 获取要复制的文本
let textToCopy = document.getElementById("text-to-copy");
// 给文本添加鼠标移入事件
textToCopy.addEventListener("mouseenter", function() {
// 创建复制功能的虚拟文本框
let tempInput = document.createElement("input");
tempInput.style = "position: absolute; left: -1000px; top: -1000px;";
tempInput.value = textToCopy.textContent;
// 将虚拟文本框添加到 DOM 中
document.body.appendChild(tempInput);
// 选中虚拟文本框中的文本
tempInput.select();
// 复制选中的文本
document.execCommand("copy");
// 移除虚拟文本框
document.body.removeChild(tempInput);
});
```
在上面的代码中,我们首先获取要复制的文本,并给它添加了一个鼠标移入事件。在事件处理函数中,我们创建了一个虚拟文本框,并将要复制的文本赋值给它的 value 属性。然后将虚拟文本框添加到 DOM 中,选中其中的文本,使用 `document.execCommand("copy")` 命令复制选中的文本,最后再将虚拟文本框从 DOM 中移除。
相关推荐
![](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)