JavaScript 实现复制功能（ JS 获取当前页面 URL）

JavaScript 实现复制功能（ JS 获取当前页面 URL）

本文将学习如何通过 JavaScript 实现复制功能。

方法一：使用简单的 JavaScript 代码

我们可以使用 Clipboard API 的 Clipboard.writeText() 或 Clipboard.write() 方法来用指定数据覆盖剪贴板内容。

实例 function myFunction() {  /* 获取文本内容 */  var copyText = document.getElementById("myInput");  /* 选择复制内容 */  copyText.select();  copyText.setSelectionRange(0, 99999); /* 为移动设备设置 */   /* 复制内容到文本域 */  navigator.clipboard.writeText(copyText.value);  /* 弹出已复制的内容 */  alert("复制的文本为: " + copyText.value);}尝试一下 »

可以将复制完成后，使用更友好的方式来提示：

实例 function myFunction() {  var copyText = document.getElementById("myInput");  copyText.select();  copyText.setSelectionRange(0, 99999);  navigator.clipboard.writeText(copyText.value);    var tooltip = document.getElementById("myTooltip");  tooltip.innerHTML = "复制内容: " + copyText.value;}function outFunc() {  var tooltip = document.getElementById("myTooltip");  tooltip.innerHTML = "点击按钮复制";}尝试一下 »方法二：使用第三方库 clipboard.js（推荐，兼容性强）

clipboard.js 官网：clipboardjs.com/

clipboard.js Github：github.com/zenorocha/clipboard.js

我们可以下载 clipboard.js 并引入项目：

<script src="dist/clipboard.min.js"></script>

当然，更简单的是直接使用国内 CDN 库：

<script src="cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>实例 new ClipboardJS('#copyInput', {    text: function(trigger) {        return document.getElementById("myInput").value;    }}).on('success', function(e) {   alert("复制成功！！！");   e.clearSelection();}).on('error', function(e) {    alert('Error!');});尝试一下 »

clipboard.js 浏览器支持