原生 js 实现点击按钮复制隐藏文本的内容

最新推荐文章于 2024-09-26 14:44:31 发布

原创最新推荐文章于 2024-09-26 14:44:31 发布 · 3.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#web前端 #js #javascript #复制 #原生js复制

web前端学习专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现文本复制的方法，通过document.execCommand('copy')及input.select()结合，可实现在用户不可见区域自动选择并复制文本，适用于各种复制场景。

首先能做到复制文本的内容

js提供原生命令【document.execCommand(“copy”);】便可以复制用户选择的内容，做个测试

document.execCommand("copy");

在这里插入图片描述

自动选择，并复制文本的内容

输入框可做自动选择，,通过输入框自动选择然后选择文本

var input = document.getElementById("text");
input.select(); // 选中文本
document.execCommand("copy"); // 执行浏览器复制命令
alert("复制成功");

如何隐藏输入框？

使用【display: none】【hidden】？这样会隐藏输入框，会造成无法选中。
变相的做法是把输入框显示在用户看不到的地方，可以是显示在屏幕外，或者用别的元素挡住。

参考代码完整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #text {
            position: absolute;
            top: -100px;
        }
    </style>
</head>
<body>

<div class="wrapper">
    <input type="text" id="text" value="你居然敢复制我！！" style="width: 300px;" >
    <button onclick="copyText()">复制</button>
</div>
</body>
<script type="text/javascript">
    function copyText() {
        text = 'aa';
        var input = document.getElementById("text");
        input.select(); // 选中文本
        document.execCommand("copy"); // 执行浏览器复制命令
        alert("复制成功");
    }
</script>
</html>