在使用alert时影响用户体验使用其他方式提示用户。修复代码!DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 title复制按钮title script src=httpscdnjsdelivrnetclipboardjs1512clipboardminjsscript script src=httpslibsbaiducom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复制按钮</title>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
<script src="https://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
微信号：<span id="target">xiaoqiwenan_1</span>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">
点击复制
</button>
<div id="success_msg" style="display:none;">微信号复制成功</div>
<script>
$(document).ready(function(){
var clipboard = new Clipboard('#copy_btn');
clipboard.on('success', function(e) {
$('#success_msg').fadeIn(500).delay(1000).fadeOut(500);
window.location.href='weixin://';
e.clearSelection();
});
});
</script>
</body>
</html>
<p>使用了一个隐藏的div元素来提示用户复制成功，通过fadeIn和fadeOut来实现渐入渐出的效果。同时，将微信打开的代码放在了复制成功的回调函数中，确保只有复制成功后才会打开微信。</p>
原文地址: https://www.cveoy.top/t/topic/b6N0 著作权归作者所有。请勿转载和采集!