复制功能


实现

使用 ts 实现

export default async function copyText(text: string) {
  if (document.queryCommandSupported?.("copy")) {
    // 使用已废弃的 document.execCommand 方法
    const ref = document.createElement("textarea");
    document.body.appendChild(ref);
    ref.value = text;
    ref.select();
    document.execCommand("copy");
    document.body.removeChild(ref);
  } else if (navigator.clipboard?.writeText) {
    // w3 标准
    try {
      await navigator.clipboard.writeText(text);
    } catch (error) {
      return false;
    }
  } else if ((window as any).clipboardData?.setData) {
    // 兼容 ie
    (window as any).clipboardData.setData("Text", text);
  } else {
    return false;
  }
  return true;
}

使用

copy 函数类型如下:

declare function copy(text: string): Promise<boolean>;
  • 参数 text:需要复制的文本

  • 返回值:成功返回 true,反之 false

示例

<input type="text" id="input" />
<button onclick="copy(input.value)">copy</button>

<!-- 引入 copy 函数包 -->
<script src="lib/copy.js"></script>
<script>
  var input = document.getElementById("input");
</script>

FAQ

切入式 H5 能否实现?

大多数情况下是不能的,我和同事只是测试了 IOS 和微信小程序,二者都不支持,在嵌入式中,复制还是要和客户端进行通信,让客户端自行复制。

兼容性?

ie 5 兼容。

想要更完整的库?

可以使用 copy-to0clipboard,不过这个库有点臃肿。

参考