实现点击链接复制其地址的功能（分享链接）

最新推荐文章于 2023-12-13 16:33:18 发布
最新推荐文章于 2023-12-13 16:33:18 发布
阅读量2.3w 收藏 7
点赞数 2
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47953779/article/details/109022549
版权

在PC页面中实现点击一个链接，复制到粘贴板上

思路：
1、创建一个新标签input
2、把要复制的链接添加里面
3、通过document.execCommand函数将其复制到粘贴板上
4、移除input

execComman 函数好像只能复制input里的 value值（仅供参考）

 shareUrl(share) {
 		//share 链接地址
      var tag = document.createElement("input");
      tag.setAttribute("id", "share_url");
      tag.value = share;
      document.getElementsByTagName("body")[0].appendChild(tag);
      document.getElementById("share_url").select();
      document.execCommand("copy");
      document.getElementById("share_url").remove();
      this.$message.success("复制成功");
    },
桐桐家的陈陈
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue点击复制链接功能
m0_57391092的博客
10-14 6236
需求：点击复制链接，粘贴到地址栏中跳转到相应页面 原理：创建input标签，将链接值赋值给input标签，调用浏览器复制方法 示例代码： <template> <div class="box"> <div class="title">复制链接并在地址栏输入可跳转</div> <p v-text="url"></p> <el-button v-if="url" @click="Copy...
js如何实现点击复制链接
热门推荐
qq_36926807的博客
07-20 11万+
研究了好久，请看一下代码：    function copyUrl(){      var ele = document.getElementById("url");      ele.select();      document.execCommand("Copy");      alert("复制链接成功！");     } 测试了一下是有兼容性问题的，只适合web浏览器，ios并不管用...
HTML实现复制链接到剪切板
最新发布
LY_LM的博客
12-13 579
【代码】HTML实现复制链接到剪切板。
JS点击复制链接
咿呀的博客
10-11 1万+
关于这个复制，弄的我脑瓜疼，之前用的方法，安卓机和PC端可用，iPhone中没有反应。多谢我同事找的这个，经过上线测试，都可以用，么有问题 需加载这个js &amp;amp;lt;script type='text/javascript' src=&amp;quot;https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js&amp;quot;&amp;amp;gt;&amp;amp;lt;/sc
js实现点击复制链接功能
qq_41008682的博客
11-23 1万+
像这种复制链接的功能一般我们把他放在utils文件中. 代码如下: //文本复制 exportfunctioncopyText(value){ returnnewPromise((resolve)=>{ varinput=document.createElement("input");//js创建一个input输入框 input.value=value;//将需要复制的文本赋值到创建的input输入框中 document...
js实现点击复制当前页面的链接
qq_48302202的博客
12-09 1632
js实现点击复制当前页面的链接
JavaScript实现点击按钮就复制当前网址
10-23
在大量的网站都有这样的功能，当点击一个按钮的时候可以复制当前页面的地址，以此可以方便网站用户对链接的存储，同时也便于网站的推广，下面给大家分享具体实现代码，对js实现点击按钮就复制的相关知识感兴趣的朋友...
Vue 实现复制功能,不需要任何结构内容直接复制方式
10-16
本文将详细介绍如何使用`document.execCommand`方法在Vue组件中实现无结构内容的复制功能，无需创建特殊的DOM元素或者绑定ID。 首先，我们要了解`document.execCommand`是一个全局的JavaScript方法，它允许我们在...
JavaScript实现复制或剪切内容到剪贴板功能的方法
01-19
项目中需要实现一个点击按钮复制链接的功能，网上看到的几款插件，ZeroClipboard是通过flash实现的复制功能，随着越来越多的提议废除flash，能不能通过JS来实现复制剪切呢，今天分享一个兼容IE7浏览器复制的插件给...
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
10-22
Zero Clipboard 是一个JavaScript库，它允许用户通过模拟浏览器的复制功能，实现在网页上点击按钮后将特定文本复制到剪贴板。这个库主要用于解决浏览器安全限制，因为JavaScript通常无法直接访问剪贴板数据。Zero ...
mailtocopy:jQuery 插件允许单击或复制 html 中的电子邮件地址
07-08
邮寄至复印 jQuery 插件允许单击或复制/粘贴 HTML 中的电子邮件地址 其目标是允许用户单击邮件链接以使用其设备的本机电子邮件客户端或复制地址以轻松使用基于 Web 的客户端。 如果您像往常一样编写 mailto 链接并添加一个类，则可以使用 jQuery 在该类上调用mailtocopy() 。 原始链接继续起作用并且不会中断段落或其他内联元素的流动。 该插件处理 mailto 链接上的所有标准选项（多个地址、主题行等）。没有选项，CSS 被添加到<head> 。 默认 CSS 在宽度小于 768 像素（< 桌面）的设备上禁用插件功能。 这可以防止悬停覆盖移动设备上的点击，并且大多数人无论如何都在他们的移动设备上使用本机电子邮件客户端。 根据需要覆盖 CSS。
shareurl1.txt
05-24
根据msdn网站的内容制作了vs2019版的msdn 文档离线安装镜像，制作日期为2020年3月，帮助文件为2020年3月的最新版，包含中英两种语言。
vue 二维码长按保存和复制内容操作
10-14
在Vue开发中，有时我们需要实现二维码的生成以及与之相关的功能，如长按保存到相册和复制内容。本文将详细介绍如何在Vue项目中实现这些功能。...这些功能对于移动应用尤其有用，可以方便用户分享链接或保存信息。
android点击复制链接地址,在Android中的EditView中可点击链接和复制/粘贴菜单
weixin_31699893的博客
05-26 1611
我不认为用户在链接和复制模式之间切换会赢得可用性奖。 我的解决方案允许您选择文本并同时打开链接。 为了实现这一点，我只需要扩展ArrowKeyMovementMethod，它允许选择文本，并从LinkMovementMethod中添加onTouchEvent()方法，该方法处理链接的点击/触摸。 只有一行代码需要更改，即在触摸屏幕的坐标处找不到链接时，从TextView中删除选择的代码。这是完整的...
点击复制网址的JS代码
andy77的专栏
11-10 2802
1.点击复制INPUT内容function oCopy(obj){    obj.select(); js=obj.createTextRange();     js.execCommand("Copy");     alert("QQ号复制成功,可在添加好友时直接粘贴!"); }   鼠标在QQ号上点一下: 　可以通过定义input的style来定义背
点击按钮，实现复制网址的代码
管子（zero）的杂乱空间
12-07 1867
按钮代码： 复制本贴地址发送给好朋友 调用函数 function copyToClipBoard(){ var clipBoardContent=""; clipBoardContent+=document.URL window.clipboardData.setData("Text",clipBoardContent); alert("复制成功"); }
H5调用微信接口自定义分享链接
weixin_41559882的博客
01-21 3114
微信H5自定义分享链接，解决二次分享打不开的问题，解决分享一直是主页的问题
点击鼠标实现复制功能，兼容主流浏览器
hangGe0111的博客
11-29 811
1.有一个需求，点击鼠标左键，复制链接，可以将该链接粘贴，实现一个简单的复制粘贴功能 2.代码实现 （1）HTML代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/htm
在html中点击跳转链接
qq_44866810的博客
06-25 3167
一般a标签自带href，如果不是a标签的话，使用以下方法。(2)使用js在onclick事件中调用该函数。(1)直接在标签上使用。
禁止微信H5页面点击右上角菜单时出现复制链接，但支持转发给好友和分享到朋友圈
09-02
### 回答1： 可以使用 JavaScript 来禁止点击右上角菜单时出现复制链接的功能。可以在页面的 JavaScript 代码中添加如下代码： ``` document.addEventListener('contextmenu', function(e){ e.preventDefault(); }, false); ``` 这样就可以禁止右键菜单了。 同时可以使用如下代码来支持转发给好友和分享到朋友圈： ``` <a href="javascript:void(0);" onclick="wx.ready(function(){wx.updateAppMessageShareData({ title: '分享标题', // 分享标题 desc: '分享描述', // 分享描述 link: '分享链接', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '图片链接', // 分享图标 success: function () { // 设置成功 } });wx.updateTimelineShareData({ title: '分享标题', // 分享标题 link: '分享链接', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '图片链接', // 分享图标 success: function () { // 设置成功 } });});">分享给好友和朋友圈</a> ``` 但是需要注意的是，这需要您的网页已经与微信公众平台接入并配置了 JSSDK。 ### 回答2： 禁止微信H5页面点击右上角菜单时出现复制链接，但支持转发给好友和分享到朋友圈，可以通过以下方法实现。 首先，要禁止复制链接的功能，可以在微信H5页面的代码中添加一段JavaScript代码，通过对右上角菜单的点击事件进行拦截和处理。可以使用`document.addEventListener`方法监听菜单的点击事件，然后判断点击的是哪个菜单选项，如果是复制链接，则阻止默认行为。具体的代码如下所示： ```javascript document.addEventListener('WeixinJSBridgeReady', function() { WeixinJSBridge.on('menu:share:appmessage', function(){ // 阻止复制链接菜单的默认行为 event.preventDefault(); }); }); ``` 以上代码通过使用WeixinJSBridge对象来添加事件监听器，在菜单选中之前拦截了这个事件，并阻止了复制链接菜单的默认行为。 然后，要支持转发给好友和分享到朋友圈，可以通过微信的OpenAPI提供的接口来实现。具体来说，可以使用`onMenuShareAppMessage`方法和`onMenuShareTimeline`方法来设置分享给好友和分享到朋友圈的功能。示例如下所示： ```javascript wx.ready(function(){ // 设置分享给好友的功能 wx.onMenuShareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享图标', success: function () { // 分享成功后的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 } }); // 设置分享到朋友圈的功能 wx.onMenuShareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享图标', success: function () { // 分享成功后的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 } }); }); ``` 以上代码通过使用wx对象来调用微信的接口方法，设置了分享给好友和分享到朋友圈的功能，并可以根据需要自定义分享的标题、描述、链接和图标。 通过以上方法，可以实现禁止微信H5页面点击右上角菜单时出现复制链接的功能，并支持转发给好友和分享到朋友圈的功能。 ### 回答3： 为了禁止微信H5页面点击右上角菜单时出现复制链接的功能，可以通过以下方法实现。首先，在页面加载完成后或者点击菜单时，可以通过JavaScript禁用右上角菜单中的复制链接功能。 可以使用以下代码片段来实现禁止复制链接的功能： ``` document.addEventListener('WeixinJSBridgeReady', function() { WeixinJSBridge.call('hideOptionMenu'); }); ``` 在这个代码片段中，我们使用WeixinJSBridge的hideOptionMenu方法来隐藏右上角菜单。这样，当用户点击菜单时，就不会出现复制链接的选项。 然而，我们还需要支持转发给好友和分享到朋友圈的功能。为了实现这个目标，我们可以自定义右上角菜单。 通过WeixinJSBridge的invoke方法，我们可以调用微信的API实现自定义菜单。下面是一个示例代码片段： ``` document.addEventListener('WeixinJSBridgeReady', function() { WeixinJSBridge.invoke('setNavigationBarRightButton', { text: '分享', // 自定义菜单的文本 show: true // 是否显示菜单 }, function(res) { if (res.err_msg === 'setNavigationBarRightButton:ok') { // 点击菜单后执行的回调函数 WeixinJSBridge.call('showOptionMenu'); } }); }); ``` 在这个示例中，我们首先调用setNavigationBarRightButton方法来设置右上角菜单的文本和是否显示菜单。然后，在回调函数中再次调用showOptionMenu方法来显示右上角菜单。 通过这种方式，我们禁止了复制链接的功能，同时支持用户转发给好友和分享到朋友圈的操作。这样，用户就可以方便地与他人分享H5页面的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值