js如何实现点击复制链接

研究了好久，请看一下代码：

function copyUrl(){
   var ele = document.getElementById("url");
   ele.select();
document.execCommand("Copy");
   alert("复制链接成功！");
   }

测试了一下是有兼容性问题的，只适合web浏览器，ios并不管用，最后考虑用插件

1.ZeroClipboard 使用flash优雅降级果断放弃

2.Clipboard 比较好很轻量

如下代码：

js引入：

HTML：

<textarea id="url" cols="32" value="<?php echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>" style="margin:.5rem;border:1px solid #ddd"><?php echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?></textarea>
<button id="copyUrl" data-clipboard-target="#url" data-clipboard-action="copy" style="margin-bottom:.6rem;border:none;">复制链接</button>

javascript:

var clipboard = new Clipboard('#copyUrl');
clipboard.on('success', function(e) {
layer.alert("复制成功");
e.clearSelection();
console.log(e.clearSelection);
});
clipboard.on('error', function(e) {
alert("当前浏览器不支持此功能，请手动复制。")
});

效果图：

注意事项：文章中的红色部分要使用textarea或者input 以及button标签来实现，其他标签不行

clipboard.min.js下载地址请前往：http://sucai.gxyourui.cn/Home/Article/blog_detail/article_id/56.html

js如何实现点击复制链接相关推荐

JS简单实现点击复制链接的方法 ------亲测可用
<textarea name="text" id="text" cols="30" rows="10">&l ...
vue点击复制链接功能
需求:点击复制链接,粘贴到地址栏中跳转到相应页面原理:创建input标签,将链接值赋值给input标签,调用浏览器复制方法示例代码: <template> <div class= ...
js实现点击复制链接功能
像这种复制链接的功能一般我们把他放在utils文件中. 代码如下: // 文本复制 export function copyText(value) { return new Promise((reso ...
vue点击复制链接功能两种方法实现
今天在写需求的时候有个复制链接功能给实现下,有两种方式可实现第一种用原生实现 <Button type="success" @click="copyLink(ro ...
js实现网页点击复制（可用于h5点击复制等）
var input1 = document.createElement("input"); // 直接构建inputinput1.value = "内容内容内容内容&qu ...
点击按钮复制链接（实现点击按钮，复制文本框中的的内容）
想要的效果是,点击复制链接的按钮,然后就把事先准备好的链接复制上,然后crtr+v就能黏贴出来我实在react的项目中使用的 // 复制链接方法 copyUrl() {let inputText = ...
4/23 复制链接、微信扫码分享、微博，qq及空间的分享组件
实现点击复制链接功能使用插件vue-clipboard2 实现剪切板的功能 1.安装 npm install --save vue-clipboard2 2.在main.js中引入 import V ...
结果页要求用户复制链接进行分享而不是直接调用浏览器分享API的原因
最近的项目有个需求是用户测试得到结果后点击分享,弹出自定义的弹框,选择要分享到微信.qq或者微博,随便点哪个都是要求复制链接,再到对应的app内粘贴链接给好友,而点击复制链接后,用户就可得到一个礼包码 ...
点击复制以及长按识别图中二维码功能
功能介绍:1.点击复制按钮,复制指定内容:2.借助微信浏览器识别图中二维码.效果如图: 功能介绍点击复制功能前提:引入clipboard.js html <div class="g ...

js如何实现点击复制链接

js如何实现点击复制链接相关推荐

最新文章

热门文章