js实现点击复制文字内容到粘贴板的方法

最新推荐文章于 2024-07-15 23:23:20 发布

秋乏

最新推荐文章于 2024-07-15 23:23:20 发布

阅读量4.2k

点赞数 1

分类专栏：前端文章标签：前端 JavaScript

本文链接：https://blog.csdn.net/u013895577/article/details/79975042

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

假设我们有一个表格的数据：

<table id="data">
    <tr>
        <td class="copyable"> 姓名:</td>
        <td class="copyable">张三</td>
    </tr>
    <tr>
        <td> 年龄:</td>
        <td>18</td>
    </tr>
    <tr>
        <td class="copyable"> 性别:</td>
        <td class="copyable">男</td>
    </tr>
</table>

为了方便控制取出哪些<td>标签中的内容，我们为需要复制的标签中加入copyable类，若有更好的方法取出要复制的内容，此为非必需。

我们需要一个按钮达到点击按钮复制这个表格内容的效果

<br>
<button id="copy">copy</button>

另外我们需要一个复制失败时，用来显示手动复制输入框的容器

<br>
<div id="copy-temp"></div>

接下来引入jQuery文件

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

复制内容的主要方法是创造一个临时存放复制文本的textarea标签，将其拼接到文档内，再使用document.execCommand("Copy")复制内容，笔者试过，使用<input type="hidden">做临时的复制内容的容器无法复制。

<script>
    $("#copy").click(function () {
        var $o = $("<textarea rows='10' cols='50'>");
        $o.val($("#data .copyable").text())//填充要复制的文字
        $("#copy-temp").append($o)
        if (copy($o[0])) {
            $o.remove()
            alert("复制成功！");
        }else{
            alert("复制失败，请手动复制");
        }
    })

    function copy(obj) {
        obj.select();
        try {
            if (document.execCommand('copy', false, null)) {
                document.execCommand("Copy");
                return true;
            } 
        } catch (err) {

        }
        return false;
    }
</script>

完整代码如下

<table id="data">
    <tr>
        <td class="copyable"> 姓名:</td>
        <td class="copyable">张三</td>
    </tr>
    <tr>
        <td> 年龄:</td>
        <td>18</td>
    </tr>
    <tr>
        <td class="copyable"> 性别:</td>
        <td class="copyable">男</td>
    </tr>
</table>
<br>
<button id="copy">copy</button>
<br>
<div id="copy-temp"></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    $("#copy").click(function () {
        var $o = $("<textarea rows='10' cols='50'>");
        $o.val($("#data .copyable").text())//填充要复制的文字
        $("#copy-temp").append($o)
        if (copy($o[0])) {
            $o.remove()
            alert("复制成功！");
        }else{
            alert("复制失败，请手动复制");
        }
    })

    function copy(obj) {
        obj.select();
        try {
            if (document.execCommand('copy', false, null)) {
                document.execCommand("Copy");
                return true;
            } 
        } catch (err) {

        }
        return false;
    }
</script>