手机端点击复制链接到剪切板(以及PC端)

2023-04-27,,

一直在找如何能点击按钮将一串字符串放到手机的剪切板上,但是可能是因为搜索的关键字不对,一直无果。

向同事请教了一下,给了一个clickboard.js的插件。开始试验的时候,使用手机自带浏览器进行测试,但是提示复制失败,就以为不行,但是其他人尝试的时候,都说是成功的,原来是微信端是可以使用这个复制方法的。

因为一般所做的网页都是用微信端进行访问,所以这样也算是实现了想要的功能。

<a href="javascript:;" style="color: #fff;"data-clipboard-text="@Model.ActivityLink" id="copyLink">复制活动链接</a>
<script src="/content/scripts/clipboard/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('#copyLink');
clipboard.on('success', function (e) {
alert("复制成功!");
return;
}); clipboard.on('error', function (e) {
var link = $("#copyLink").attr("data-clipboard-text");
alert("复制失败!请手动复制,地址“" + link + "”");
return;
});
</script>

data-clipboard-text即为插件获取需要复制的字符串所处的属性名

至于这个js是GitHub中开源的一个项目https://github.com/zenorocha/clipboard.js (实现纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能)

这个插件也是可以使用在PC端的,火狐,google,qq浏览器都是可以使用的。只是手机端的浏览器大概是机制问题?无法使用。

这里还有一个js插件:https://files.cnblogs.com/files/danlis/zeroclipboard.zip 直接把这个上传到了博客园的文件中,据说是PC端的复制,我还没测试过。

手机端点击复制链接到剪切板(以及PC端)的相关教程结束。

《手机端点击复制链接到剪切板(以及PC端).doc》

下载本文的Word格式文档,以方便收藏与打印。