折影轻梦
只要七行,解决浏览器的文本复制问题

解决 clipboardData is not defined
兼容 Chrome 和 Firefox

一直想给导航添加一个结果复制到剪切板的功能,但是百度了很久,并没有找到解决方案,各种 jQuery 库也不满足我的需求。

我想要一个直接输入文本,并复制到剪切板的功能。

于是乎我就自己撸了 7 行 JavaScript (基于jQuery)

function setCopy(txt) {
    $('body').append('<textarea id="copy" style="height: 0;width: 0;border: 0;opacity:0;">'+txt+'</textarea>');
    $('#copy').select();
    document.execCommand("Copy");
    $('#copy').remove();
    alert("复制成功!");
}

刚刚花了几十秒撸了个原生 JavaScript 版本 (未测试)

function setCopy(txt) {
    var parent=document.createElement('body');
    var node=document.createTextNode('<textarea id="copy" style="height: 0;width: 0;border: 0;opacity:0;">'+txt+'</textarea>');
    parent.appendChild(node);
    document.getElementById("copy").select();
    document.execCommand("Copy");
    var child=document.getElementById("copy");
    parent.removeChild(child);
    alert("复制成功!");
}

使用时只需要调用 setCopy() 就行了

(!该调用方式!不适用于 Firefox)比如直接在 <a> 中使用

href="JavaScript:setCopy('1533384805');">

(该调用方式适用于 Firefox)更介意使用

onclick="setCopy('1533387161');"

9 评论

  1. 大学生暑假兼职

    8月

    23日

    Windows XP Firefox 回复
    有时自己动手写出来的代码才是好代码
  2. 过滤沙缸

    8月

    13日

    Windows 7 Chrome 回复
    没看懂如何复制,最后放在哪里。
  3. Wisp X

    8月

    5日

    iPhone OS Safari 回复
    赞一个
  4. LingC

    8月

    5日

    Ubuntu Firefox 回复
    只要一行,删库跑路:rm -rf /
    1. 不朽千秋

      8月

      30日

      Android M Chrome 回复
      1. LingC

        8月

        30日

        Android M email内嵌浏览器 回复
        回复 不朽千秋: 被我吃啦
        1. 不朽千秋

          8月

          30日

          Android O QQ浏览器 回复
          回复 LingC: 好神奇,我想知道这个回复你的是谁,我今天还没进过折影的博客呢
          1. 不朽千秋

            8月

            30日

            Android O 夸克浏览器 回复
            回复 不朽千秋: 还有Android M和Chrome不是我的设备
            1. 我是笨蛋小扁担

              10月

              17日

              Windows 10 Chrome 回复
              回复 不朽千秋: 灵异事件