点击复制功能

最新推荐文章于 2024-09-29 22:49:06 发布

攻城虎

最新推荐文章于 2024-09-29 22:49:06 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_38557634/article/details/79731603

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何利用ClipboardJS库实现网页上的一键复制功能，通过简单的HTML和JavaScript代码，用户可以轻松复制指定文本，增强用户体验。文章详细解释了ClipboardJS的初始化、事件监听及回调函数的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="aa.js"></script>
</head>
<input id="taokouling" value="111111" type="text">
<button id="copyCode" class="btn" data-clipboard-target="#taokouling" data-clipboard-action="copy">
复制淘口令
</button>

<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e){
console.log(e);
document.getElementById('copyCode').innerHTML = '复制成功';
});
clipboard.on('error', function(e){
document.getElementById('copyCode').innerHTML = '复制失败，请长按复制';
});
</script>
</html>