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

最新推荐文章于 2024-03-20 09:00:00 发布

勇宝趣学前端

最新推荐文章于 2024-03-20 09:00:00 发布

阅读量820

点赞数 18

分类专栏：每天一个JavaScript知识点文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_44013288/article/details/135907254

版权

每天一个JavaScript知识点专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

擷取.PNG

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

一、核心原理

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

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

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

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

二、案例展示

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

1. html模版

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

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

擷取.PNG

编写弹出框用来提示复制成功，默认不显示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;
}

擷取.PNG

2. JS逻辑

有两个功能是要我们在这一部分中实现的，一个是点击一键复制按钮，弹出提示框，过两秒后移除，另一个是当我们点击一键复制后通过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">

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