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

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

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

一、核心原理

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

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

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

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

二、案例展示

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

1. html模版

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

html 复制代码

<body>
    <div class="block">
        <textarea id="text" cols="30" rows="10"></textarea>
    </div>
    <button>一键复制</button>
</body>

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

html 复制代码

<body>
    <div class="alert">复制成功</div>
    <div class="block">
        <textarea id="text" cols="30" rows="10"></textarea>
    </div>
</body>

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

css 复制代码

.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能够粘贴我们文本框中输入的内容。

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

js 复制代码

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

这里我们定义一个定时器，顺便来定义一下剪切板
js 复制代码
```
let timer = null
let clipboard = navigator.clipboard
```

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

js 复制代码

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进行粘贴啦！！！

三、案例完整代码

html 复制代码

<!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一样重要，学好了对我们自身的技能都是有很大的提升，今天就不总结那么多了，总之就是今天又学会了一个知识点，我开心(^▽^)