js实现复制文字内容

标签: 前端 JavaScript
17人阅读 评论(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>
查看评论

wu反走样(Anti-aliased)直线

可能有图片或者下载的链接不对,请到原始地址查看.http://dgame.yeah.net=======================================================...
  • vertex
  • vertex
  • 2001-06-05 21:54:00
  • 1437

原生js实现复制浏览器内容

Document 需要复制的文字
  • bb415453941
  • bb415453941
  • 2017-04-21 13:28:34
  • 1210

一段js实现复制文本内容到剪切板

直接上代码: function copyUrl2() { var Url2=document.getElementById("biao1").innerText; ...
  • github_36091081
  • github_36091081
  • 2017-08-23 17:24:55
  • 5097

js小技巧:复制内容时自动加上一段文本

小技巧:复制网页上面内容时,自动在剪切板内容后面加上网站信息,这样也利于SEO优化: // ...
  • ww122081351
  • ww122081351
  • 2014-01-02 15:21:34
  • 1139

ios实现点击复制文字到剪贴板

移动端点击复制文字到剪贴板: html代码: 复制我到剪贴板 点击复制 复制文字的代码需要放在点击事件中 js代码: $("#button").click(function(){ if (...
  • u010394015
  • u010394015
  • 2017-02-09 09:55:26
  • 5455

js复制内容到剪贴板代码,js复制代码

例子       function jsCopy(){          var e=document.getElementById("contents");//对象是contents    ...
  • jin367411763
  • jin367411763
  • 2016-05-05 16:28:30
  • 11468

js 复制文本的四种方式

纯 转载复制,非原创 原地址:http://www.cnblogs.com/xhyu/p/5370111.html 目前copy主流有四种方式:ZeroClipboard,Clipboar...
  • qq_32835907
  • qq_32835907
  • 2017-04-21 09:50:02
  • 3127

javascript 原生js修改浏览器复制、粘贴内容

剪贴板
  • szuaudi
  • szuaudi
  • 2017-08-03 15:54:46
  • 524

js点击复制input内容

点击button 复制input里面的内容 function copytxt(){ var d = document.getElementById("text"); d...
  • yangtjh
  • yangtjh
  • 2016-05-04 15:09:18
  • 1742

js 复制文本内容

记录工作学习中的小技巧 复制网页中的内容到剪切板上; 本文介绍两种方式,都亲身验证过哦 第一种:常规方法,但是只兼容IE浏览器与使用IE内核的浏览器。 优点是体积小,仅有十来行代码,但缺点...
  • PanRuiFang
  • PanRuiFang
  • 2015-03-24 17:59:32
  • 2188
    个人资料
    等级:
    访问量: 454
    积分: 66
    排名: 161万+
    文章存档