JavaScript实现点击复制的功能

最新推荐文章于 2024-06-15 07:54:41 发布

大前端工程师

最新推荐文章于 2024-06-15 07:54:41 发布

阅读量2.6k

点赞数

分类专栏： web前端基础文章标签： javascript 前端开发语言

程麒阁-大连大学-软件工程学院

本文链接：https://blog.csdn.net/chengqige/article/details/126622090

版权

web前端基础专栏收录该内容

10 篇文章 1 订阅

订阅专栏

需求背景

有些时候我们需要实现让用户点击一个按钮就可以复制文字的功能，那么你知道要怎么去做嘛？

代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击复制</title>
</head>

<body>
    <input id="a"/>
    <button onclick="select()">点击复制</button>
    <script>
        function select(){
            // 当是id选择器的时候可以直接用id的名称代指element元素
            console.log(a.value)
            navigator.clipboard.writeText(a.value).then(r=>{
                alert("复制成功")
            })
        }
    </script>
</body>
</html>

要实现粘贴功能也是可以的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击粘贴</title>
</head>

<body>
    <div id="box"></div>
    <button onclick="paste()">点击粘贴</button>
    <script>
        function paste() {
            navigator.clipboard.readText().then(r => {
                console.log('剪切版中的内容', r);
                box.innerText=r
            }).catch(err => {
                console.error('没有剪切板权限！，点击地址栏左边的按钮添加权限！');
            })
        }
    </script>
</body>
</html>