网页内容复制粘贴(三种方案 兼容多种浏览器)

对网页上的内容实现复制粘贴的功能
痛点:需要支持多种不同的浏览器 主要有IE,Firefox

  • IE浏览器下的解决方案:window.clipboardData.setData("Text", text);
  • 通用浏览器的解决方案:选中元素之后执行:document.execCommand('copy')
  • Firefox下的解决方案两种折中的方案
  • 监听hover事件 当鼠标移动至需要复制的文本上时 用户按下ctrl+c 实现复制
  • window.prompt("Copy to clipboard: Ctrl+C, Enter", text);弹出框内容为选中的文案,用户按下ctrl+c 实现复制

整合之后的代码为:

function copyToClipboard(text) {
  if (window.clipboardData) { // Internet Explorer
    window.clipboardData.setData("Text", text);
  } else {
    var textArea = document.createElement("textarea");
    textArea.style.background = 'transparent';
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();
    try {
      if (!document.execCommand('copy')) {
        copyToClipboardMozilla(text);
      } else {
        showInfo("提示", "复制成功")
      }

    } catch (err) {
      console.log('Oops, unable to copy');
    }
      document.body.removeChild(textArea);
  }
}

function copyToClipboardMozilla(text) {
  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}

$(".copy").on("mouseenter", function () {
  $(this).css("background-color", "#c8c9c8");
  $(this).focus();
  var textArea = document.createElement("textarea");
  textArea.style.background = 'transparent';
  textArea.id = "copyContent";
  textArea.value = $(this).text();
  document.body.appendChild(textArea);
  textArea.select(); 
})

$(".copy").on("mouseleave", function () {
  $(this).css("background-color", "");
document.body.removeChild(document.getElementById("copyContent")); 
})
分类: 编程技术

淮城一只猫

永远年轻,永远热泪盈眶

1 个评论

菏泽夜生活论坛 · 2017年12月28日 - 上午8:10

博客大好,让人忘不了!

发表评论

电子邮件地址不会被公开。 必填项已用*标注