前端实用技能(一键复制代码)

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

前端实用技能(一键复制代码)_第1张图片

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

一、核心原理

复制代码的方式有很多,这里我只讨论最常用的一种,这个APIBOM的一个方法navigator.clipboard

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

本次案例我们只用到了writeText

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

二、案例展示

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

1. html模版

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

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

    前端实用技能(一键复制代码)_第2张图片

  2. 编写弹出框用来提示复制成功,默认不显示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能够粘贴我们文本框中输入的内容

  1. 先来获取我们需要的DOM元素
    
    const btn = document.getElementById('btn'), // 一键复制的按钮
          text = document.getElementById('text'), // 文本框
          alert = document.getElementById('msg'); // 弹框
    
  2. 这里我们定义一个定时器,顺便来定义一下剪切板
    let timer = null
    let 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进行粘贴啦!!!

三、案例完整代码

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

四、总结

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

你可能感兴趣的:(趣学JavaScript,前端,javascript,开发语言)