复制功能
实现
使用 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,不过这个库有点臃肿。