jquery 复制

使用 jQuery 实现复制功能

方法一：复制文本到剪贴板

通过 document.execCommand 方法实现复制功能，适用于较旧浏览器。

$("#copyButton").click(function() {
  var copyText = $("#textToCopy").val();
  var tempInput = $("<input>");
  $("body").append(tempInput);
  tempInput.val(copyText).select();
  document.execCommand("copy");
  tempInput.remove();
  alert("已复制: " + copyText);
});

方法二：使用 Clipboard API

现代浏览器推荐使用 Clipboard API，需要用户授权。

$("#copyButton").click(function() {
  var textToCopy = $("#textToCopy").val();
  navigator.clipboard.writeText(textToCopy)
    .then(() => alert("复制成功"))
    .catch(err => alert("复制失败: " + err));
});

方法三：复制元素内容

复制特定元素内的文本内容。

$("#copyButton").click(function() {
  var text = $("#elementToCopy").text();
  var $temp = $("<textarea>");
  $("body").append($temp);
  $temp.val(text).select();
  document.execCommand("copy");
  $temp.remove();
  alert("已复制");
});

注意事项

• 现代浏览器建议优先使用 Clipboard API
• 某些浏览器可能需要 HTTPS 环境才允许访问剪贴板
• 对于大量文本复制，建议显示进度或成功提示
• 移动设备上可能需要特殊处理触控事件

兼容性处理

$("#copyButton").click(function() {
  var text = $("#textToCopy").val();
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text)
      .then(() => alert("复制成功"))
      .catch(() => fallbackCopy(text));
  } else {
    fallbackCopy(text);
  }
});

function fallbackCopy(text) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val(text).select();
  try {
    document.execCommand("copy");
    alert("复制成功");
  } catch (err) {
    alert("复制失败，请手动复制");
  }
  $temp.remove();
}

以上方法可根据具体需求选择使用，现代浏览器推荐优先考虑 Clipboard API 方案。