一个网页文件下利用JS代码增加多个复制按钮自动关弹窗提示方法
先看例子，加上JS文件正常会弹出弹窗，需要用户手动关闭，在JavaScript中，alert函数用于弹出一个警告框，并且这个框是由浏览器管理的，它没有提供API来自动关闭它。一旦alert被调用，用户必须手动关闭这个警告框。因此，你不能通过JavaScript代码来自动关闭alert。如果你想要给用户一个反馈，但又不想让用户手动关闭警告框，你可以考虑使用其他的方式，处理后的效果，弹出提示可根据CSS调整位置 。
调整后效果：http://www.cxhao.com/html/szxf/market/xs/3867.html
1、原始JS代码如下，onclick="copyToClipboard触发提示，该方法会弹出弹窗提示，需要手动关闭
网页文件<input type="button" value="复制" onclick="copyToClipboard('复制的内容文本')">
JS文件代码
<script>
function copyToClipboard(text) {
let a = document.createElement("input");
a.value = text
document.body.appendChild(a);
a.select();
try {
document.execCommand("copy");
alert("复制成功！");
} catch (e) {
alert("复制链接失败！");
}
a.remove();
}
</script>
2、原始JS，onclick="copyToClipboard触发提示，该方法不会弹出弹窗提示，但不会提示用户，体验上感觉不知道复制成功没有，以便在复制文本到剪贴板后不弹出任何窗口（alert），您只需删除或注释掉与 alert 相关的代码行。下面是修改后的代码：
网页文件代码<input type="button" value="复制" onclick="copyToClipboard('复制的内容文本')">
JS文件代码
<script>
function copyToClipboard(text) {
let a = document.createElement("input");
a.value = text;
document.body.appendChild(a);
a.select();
try {
document.execCommand("copy");
// alert("复制成功！"); // 注释或删除这行以取消弹出窗口
} catch (e) {
// alert("复制链接失败！"); // 注释或删除这行以取消弹出窗口
console.error("复制链接失败: ", e); // 可以选择将错误信息输出到控制台
}
a.remove();
}
</script>
3、网页文件代码<input type="button" value="复制" onclick="copyToClipboard('复制的内容文本')"> 该方法会有弹窗提示通过CSS实现，用户不需要关闭弹窗什么的，体验较好，可以通过CSS控制弹窗的提示文字位置，在JavaScript中，alert函数用于弹出一个警告框，并且这个框是由浏览器管理的，它没有提供API来自动关闭它。一旦alert被调用，用户必须手动关闭这个警告框。因此，你不能通过JavaScript代码来自动关闭alert。
如果你想要给用户一个反馈，但又不想让用户手动关闭警告框，你可以考虑使用其他的方式，比如：
- 使用控制台输出：像前面提到的那样，你可以使用console.log或console.error在浏览器的开发者控制台中显示信息。
- 使用自定义的HTML元素：你可以创建一个自定义的HTML元素（比如一个<div>或<span>），通过修改其样式和内容来显示成功或失败的消息。你还可以使用JavaScript的setTimeout函数配合一些CSS动画来实现这个元素的自动隐藏。
- 使用模态框（Modal）：如果你想要一个更复杂的用户界面，可以使用像Bootstrap这样的库来创建一个模态框，然后使用JavaScript来控制它的显示和隐藏。
以下是一个简单的示例，展示了如何使用一个自定义的HTML元素和CSS动画来显示一个会自动隐藏的消息：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复制到剪贴板</title>
<style>
#copy-status {
position: fixed;
top: 20px;
right: 20px;
padding: 10px;
background-color: #333;
color: #fff;
border-radius: 5px;
opacity: 1;
transition: opacity 1s;
}
#copy-status.hidden {
opacity: 0;
pointer-events: none;
}
</style>
</head>
<body>
<button onclick="copyToClipboard('Hello, World!')">复制到剪贴板</button>
<div id="copy-status"></div>
<script>
function copyToClipboard(text) {
let a = document.createElement("input");
a.value = text;
document.body.appendChild(a);
a.select();
document.execCommand("copy");
let statusElement = document.getElementById('copy-status');
statusElement.textContent = "复制成功！";
statusElement.classList.remove('hidden');
// 设置定时器来自动隐藏消息
setTimeout(function() {
statusElement.classList.add('hidden');
}, 2000); // 2秒后隐藏
a.remove();
}
</script>
</body>
</html>
在这个示例中，我们创建了一个ID为copy-status的<div>元素，它初始时是不可见的（通过CSS类hidden）。当copyToClipboard函数被调用并且复制成功时，我们通过修改textContent和移除hidden类来显示这个元素。然后，我们使用setTimeout设置一个定时器，在2秒后添加hidden类，使这个元素逐渐变得透明并隐藏起来。这样，用户就不需要手动关闭任何窗口或框，消息会自动消失。
播播资源 » 一个网页文件下利用JS代码增加多个复制按钮自动关弹窗提示方法
