前端实用技能（一键复制代码）
勇宝趣学前端 2024-07-11 09:03:01 阅读 96
最近在写文章的时候发现，现在各大平台（某金）都有<code>复制代码的功能，于是勇宝就产生了好奇具体怎么实现的，今天带着大家一起来写一写。
具体的效果就是<code>点击复制代码，然后右上角弹出提示框，过一两秒自己就消失了。
一、核心原理
复制代码的方式有很多，这里我只讨论最常用的一种，这个API是BOM的一个方法navigator.clipboard。
值得一提的是clipboard是异步的，可以返回一个Promise，相信小伙伴们对Promise不是很陌生了吧，买个坑，以后来填。
本次案例我们只用到了writeText。
writeText：用来把我们要复制的内容写入到我们的剪切板readText：用来获取我们剪切板中的内容
二、案例展示
这里主要是带着大家一起来实现这个简单又有趣的
小案例，主要是带领大家熟悉和认识BOM的一些API。
1. html模版
这里我就写一个textarea框来模拟展示我们的输入内容。
<body>
<div class="block">code>
<textarea id="text" cols="30" rows="10"></textarea>code>
</div>
<button>一键复制</button>
</body>
编写弹出框用来<code>提示复制成功，默认不显示display:none；
<body>
<div class="alert">复制成功</div>code>
<div class="block">code>
<textarea id="text" cols="30" rows="10"></textarea>code>
</div>
</body>
顺便我们在编写一下弹出框的样式，让它看起来更像。
.alert {
display: none;
position: fixed;
right: 10px;
padding: 1rem 2rem;
max-width: 15rem;
font-size: 1.167rem;
color: #007bff;
background-color: #e6f3ff;
box-shadow: 0 1px 1px 0 hsl(0deg 0% 80% / 50%);
border: 1px solid #b3d0ef;
border-radius: 2px;
cursor: default;
}
2. JS逻辑
有两个功能是要我们在这一部分中实现的，一个是点击<code>一键复制按钮，弹出提示框，过两秒后移除，另一个是当我们
点击一键复制后通过ctrl+V能够粘贴我们文本框中输入的内容。
先来获取我们需要的DOM元素
const btn = document.getElementById('btn'), // 一键复制的按钮
text = document.getElementById('text'), // 文本框
alert = document.getElementById('msg'); // 弹框
这里我们定义一个定时器，顺便来定义一下剪切板
let timer = null
let clipboard = navigator.clipboard
给我们的按钮添加监听事件
btn.addEventListener('click', async () => {
// 因为返回的是Promise，所以可以使用async和await
await clipboard.writeText(text.value)
alert.style.display = 'inline-block'
// 这里简单写一下就是为了不重复生成定时器
if (!timer) {
timer = setTimeout(() => {
alert.style.display = 'none'
timer = null
}, 2000)
}
})
然后我们就可以在其他地方使用ctrl+V进行粘贴啦！！！
三、案例完整代码
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<meta http-equiv="X-UA-Compatible" content="ie=edge">code>
<title>Document</title>
<style>
.alert {
display: none;
position: fixed;
right: 10px;
padding: 1rem 2rem;
max-width: 15rem;
font-size: 1.167rem;
color: #007bff;
background-color: #e6f3ff;
box-shadow: 0 1px 1px 0 hsl(0deg 0% 80% / 50%);
border: 1px solid #b3d0ef;
border-radius: 2px;
cursor: default;
}
</style>
</head>
<body>
<div class="alert" id="msg">复制成功</div>code>
<div class="block">code>
<textarea id="text" cols="30" rows="10"></textarea>code>
</div>
<button id="btn">一键复制</button>code>
<script>
const btn = document.getElementById('btn'),
text = document.getElementById('text'),
alert = document.getElementById('msg');
let timer = null
let clipboard = navigator.clipboard
btn.addEventListener('click', async () => {
await clipboard.writeText(text.value)
alert.style.display = 'inline-block'
if (!timer) {
timer = setTimeout(() => {
alert.style.display = 'none'
timer = null
}, 2000)
}
})
</script>
</body>
</html>
四、总结
前端开发中BOM和DOM一样重要，学好了对我们自身的技能都是有很大的提升，今天就不总结那么多了，总之就是今天又学会了一个知识点，我开心(▽)
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。