写一个html5手机端点击复制微信号并且弹出复制成功或者失败
下面是一个示例的HTML代码，实现了在手机端点击复制微信号，并弹出复制成功或者失败的提示。
<!DOCTYPE html>
<html>
<head>
<title>Copy WeChat ID</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: Arial, sans-serif;
}
.wechat-id {
font-size: 20px;
margin-bottom: 20px;
}
.copy-btn {
padding: 10px 20px;
font-size: 16px;
background-color: #009688;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="wechat-id">WeChat ID: <span id="wechat-id">your_wechat_id</span></div>
<button class="copy-btn" onclick="copyWeChatID()">Copy</button>
</div>
<script>
function copyWeChatID() {
var weChatID = document.getElementById("wechat-id");
var tempInput = document.createElement("input");
tempInput.type = "text";
tempInput.value = weChatID.innerText;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
alert("WeChat ID copied successfully!");
}
</script>
</body>
</html>
在这个示例中，我们创建了一个包含微信号和复制按钮的容器。点击复制按钮时，通过JavaScript动态创建一个隐藏的input元素，并将微信号的值设置为input的value属性。然后选中这个input的内容，并执行document.execCommand("copy")命令将内容复制到剪贴板中。最后，我们移除临时input元素，并弹出复制成功的提示框
原文地址: https://www.cveoy.top/t/topic/hKss 著作权归作者所有。请勿转载和采集!