首页纯html页面怎么做点击复制

纯html页面怎么做点击复制

时间: 2023-11-18 13:41:59 浏览: 154

在纯 HTML 页面中，你可以使用 `document.execCommand("copy")` 方法来实现点击复制的功能。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>点击复制示例</title> </head> <body> <button onclick="copyToClipboard()">点击复制</button> <script> function copyToClipboard() { const textToCopy = "要复制的文本"; const tempInput = document.createElement("input"); tempInput.setAttribute("value", textToCopy); document.body.appendChild(tempInput); tempInput.select(); document.execCommand("copy"); document.body.removeChild(tempInput); alert("已成功复制到剪贴板！"); } </script> </body> </html> ``` 在上面的代码中，我们创建了一个按钮，当点击按钮时，会调用 `copyToClipboard()` 函数。在该函数中，我们首先创建一个临时的 `<input>` 元素，并将要复制的文本设置为其值。然后，我们将该 `<input>` 元素添加到页面的 `<body>` 中。接下来，我们通过调用 `select()` 方法选中文本，并使用 `document.execCommand("copy")` 方法将其复制到剪贴板。最后，我们从页面中移除临时 `<input>` 元素，并弹出一个提示框表示已成功复制。请注意，`document.execCommand("copy")` 方法也不被所有浏览器完全支持，所以在实际使用中可能需要进行兼容性检查，并提供备用方法。

阅读全文