前端实用技能（一键复制代码）
时间：2024-04-25 16:40:17 来源：网络cs 作者：付梓 栏目：卖家故事 阅读：
阅读本书更多章节>>>>
最近在写文章的时候发现，现在各大平台（某金）都有
复制代码的功能，于是勇宝就产生了好奇具体怎么实现的，今天带着大家一起来写一写。
具体的效果就是点击复制代码，然后右上角弹出提示框，过一两秒自己就消失了。
一、核心原理
复制代码的方式有很多，这里我只讨论最常用的一种，这个API是BOM的一个方法navigator.clipboard。
值得一提的是clipboard是异步的，可以返回一个Promise，相信小伙伴们对Promise不是很陌生了吧，买个坑，以后来填。
本次案例我们只用到了writeText。
二、案例展示
这里主要是带着大家一起来实现这个简单又有趣的
小案例，主要是带领大家熟悉和认识BOM的一些API。
1. html模版
这里我就写一个textarea框来模拟展示我们的输入内容。
<body> <div class="block"> <textarea id="text" cols="30" rows="10"></textarea> </div> <button>一键复制</button></body>
编写弹出框用来提示复制成功，默认不显示display:none；
<body> <div class="alert">复制成功</div> <div class="block"> <textarea id="text" cols="30" rows="10"></textarea> </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逻辑
先来获取我们需要的DOM元素有两个功能是要我们在这一部分中实现的，一个是点击
一键复制按钮，弹出提示框，过两秒后移除，另一个是当我们点击一键复制后通过ctrl+V能够粘贴我们文本框中输入的内容。
const btn = document.getElementById('btn'), // 一键复制的按钮 text = document.getElementById('text'), // 文本框 alert = document.getElementById('msg'); // 弹框let timer = nulllet clipboard = navigator.clipboardbtn.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"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <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> <div class="block"> <textarea id="text" cols="30" rows="10"></textarea> </div> <button id="btn">一键复制</button> <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一样重要，学好了对我们自身的技能都是有很大的提升，今天就不总结那么多了，总之就是今天又学会了一个知识点，我开心(▽)
本文链接：https://www.kjpai.cn/gushi/2024-04-25/162225.html，文章来源：网络cs，作者：付梓，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
下一篇：返回列表