前端实用技能（一键复制代码）

最近在写文章的时候发现，现在各大平台（某金）都有复制代码的功能，于是勇宝就产生了好奇具体怎么实现的，今天带着大家一起来写一写。

具体的效果就是点击复制代码，然后右上角弹出提示框，过一两秒自己就消失了。

一、核心原理

复制代码的方式有很多，这里我只讨论最常用的一种，这个API是BOM的一个方法navigator.clipboard。

值得一提的是clipboard是异步的，可以返回一个Promise，相信小伙伴们对Promise不是很陌生了吧，买个坑，以后来填。

本次案例我们只用到了writeText。

• writeText：用来把我们要复制的内容写入到我们的剪切板
• readText：用来获取我们剪切板中的内容

  二、案例展示

  这里主要是带着大家一起来实现这个简单又有趣的小案例，主要是带领大家熟悉和认识BOM的一些API。

  1. html模版

  1. 这里我就写一个textarea框来模拟展示我们的输入内容。

                         一键复制

  2. 编写弹出框用来提示复制成功，默认不显示display:none；

         复制成功                

     顺便我们在编写一下弹出框的样式，让它看起来更像。

     .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逻辑

  有两个功能是要我们在这一部分中实现的，一个是点击一键复制按钮，弹出提示框，过两秒后移除，另一个是当我们点击一键复制后通过ctrl+V能够粘贴我们文本框中输入的内容。

  1. 先来获取我们需要的DOM元素

     const btn = document.getElementById('btn'), // 一键复制的按钮      text = document.getElementById('text'), // 文本框      alert = document.getElementById('msg'); // 弹框

  2. 这里我们定义一个定时器，顺便来定义一下剪切板

     let timer = nulllet clipboard = navigator.clipboard

  3. 给我们的按钮添加监听事件

     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)    }})

  4. 然后我们就可以在其他地方使用ctrl+V进行粘贴啦！！！

  三、案例完整代码

                  Document            .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;        }        复制成功                    一键复制            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)            }        })    

  四、总结

  前端开发中BOM和DOM一样重要，学好了对我们自身的技能都是有很大的提升，今天就不总结那么多了，总之就是今天又学会了一个知识点，我开心(▽)