点击按钮复制链接

最新推荐文章于 2024-08-08 23:04:40 发布
最新推荐文章于 2024-08-08 23:04:40 发布
阅读量2.1w 收藏 2
点赞数
分类专栏： web前端 文章标签： javascript 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013659696/article/details/77923179
版权

做点击按钮复制链接，网上找的方法是用原生js

document.execCommand("Copy");
window.clipboardData.setData("Text",url.value);

发现微信上存在不兼容，在安卓和PC段都可以。但是在苹果上不能实现点击复制链接。

后来找了个插件

clipboard.min.js


测试了，在苹果和安卓上都可以使用。

AugChen
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
点击按钮复制功能
张静的博客
01-19 2284
复制操作是基于input输入框的，所以得事先生成一个输入框来存放需要复制的文本数据。 举例： el-table 中点击按钮复制商品链接： <el-table-column label="商品链接" min-width="120"> <template slot-scope="scope"> <el-button @click="copyUrl(scope.row.goodsurl)" round>复制链接</el-button> </te
点击按钮实现文本复制功能
想去旅行的静静的博客
08-02 443
function copy(){ if (iOS微信端) { var selectedText, element = mui('.myCode')[0]; if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') { var isReadOnly = element.hasAttribute('readonly'); .
实现点击链接复制其地址的功能（分享链接）
weixin_47953779的博客
10-12 2万+
在PC页面中实现点击一个链接，复制到粘贴板上 思路： 1、创建一个新标签input 2、把要复制的链接添加里面 3、通过document.execCommand函数将其复制到粘贴板上 4、移除input execComman 函数好像只能复制input里的 value值（仅供参考） shareUrl(share) { //share 链接地址 var tag = document.createElement("input"); tag.setAttribute("id", "
JS简单实现点击复制链接的方法
10-21
主要介绍了JS简单实现点击复制链接的方法,提供了2种简单的复制链接操作方法供大家选择使用,需要的朋友可以参考下
VUE 点击按钮复制input里的内容到剪贴板
tenggeer0789的博客
05-10 4024
<p>邀请码</p> <p class="inviteCode" id = "inviteCode">{{invite_code}}</p> <p class="copy" @click="copy">复制</p> copy() { var Url2 = document.getElementById("inv...
前端实现点击复制文本或链接！
ik0725的博客
04-26 5750
本文使用的是原生的js方法 不兼容ios浏览器 如果需要兼容浏览器 可以去搜索相关插件。最后实现 使用的js原生的 document.execCommand('copy')先写一个点击事件 事件内传入的值就是要复制的值。然后写一个空文本用来接收值。
Vue实现点击复制内容
01-08
"Vue实现点击复制内容"这个话题涉及到的是如何在Vue应用中实现在用户点击按钮后自动复制文本内容，并允许用户将其粘贴到其他地方。这个功能在现代网页应用中非常常见，比如复制验证码、URL或者文本信息等。 首先，...
jQuery简单实现点击文本框复制内容到剪贴板上的方法
10-21
这个功能在很多网站中都有应用，例如复制链接、代码或重要信息。 首先，我们需要了解浏览器对剪贴板操作的支持。在不同的浏览器中，实现剪贴板读写的方式略有不同。对于IE浏览器，我们可以使用`window....
JavaScript实现点击按钮就复制当前网址
11-23
点击按钮复制当前网址: 在大量的网站都有这样的功能，当点击一个按钮的时候可以复制当前页面的地址，以此可以方便网站用户对链接的存储，同时也便于网站的推广，下面就结合实例介绍一下如何实现此功能： <!...
JS点击复制剪贴板鼠标点击文字弹出复制链接按钮
11-11
然而，出于安全考虑，浏览器对这一API进行了限制，通常需要用户交互（如点击按钮）之后才能调用。因此，我们可以在复制按钮的点击事件处理函数中，先检查权限，然后调用`writeText()`，将链接文本复制到剪贴板。 ...
h5端点击复制分享链接
weixin_63454527的博客
09-27 3437
运用原生js实现H5网页点击复制来分享链接功能
js如何实现点击复制链接
热门推荐
qq_36926807的博客
07-20 11万+
研究了好久，请看一下代码：    function copyUrl(){      var ele = document.getElementById("url");      ele.select();      document.execCommand("Copy");      alert("复制链接成功！");     } 测试了一下是有兼容性问题的，只适合web浏览器，ios并不管用...
JS实现点击复制链接
风火燎原、
08-06 2万+
方法一： 目前最流行的点击复制链接写法。优点：有点简单，代码量少，缺点：必须要一个输入框的这类东西 &amp;amp;lt;input type=&amp;quot;text&amp;quot; size=&amp;quot;30&amp;quot; id=&amp;quot;url&amp;quot; value=&amp;quot;//www.jb51.net/&amp;quot;&amp;amp;gt; &a
点击复制链接或者文本内容
ylp的博客
10-08 1万+
html <span class="copy" data-clipboard-text="https://baidu.com">复制地址</span> js，得引用clipboard.min.js 下载地址 <script type="text/javascript" src="js/clipboard.min.js" ></script> $(f...
脚本实现点击复制本网址
管子（zero）的杂乱空间
11-27 5358
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
点击复制网址的JS代码
andy77的专栏
11-10 2851
1.点击复制INPUT内容function oCopy(obj){    obj.select(); js=obj.createTextRange();     js.execCommand("Copy");     alert("QQ号复制成功,可在添加好友时直接粘贴!"); }   鼠标在QQ号上点一下: 　可以通过定义input的style来定义背
Element学习（布局组件、案例操作）（4）
最新发布
m0_74363339的博客
08-08 456
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
js实现点击按钮复制链接到剪切板
09-03
你可以使用以下代码片段来实现在JS中点击按钮复制链接到剪贴板的功能： ```html <!DOCTYPE html> <html> <body> <!-- 创建一个输入框用于复制链接 --> <input type="text" value="https://www.example.com" id="myInput"> <!-- 添加一个按钮来触发复制操作 --> <button onclick="myFunction()">复制链接</button> <script> function myFunction() { /* 获取输入框中的链接 */ var copyText = document.getElementById("myInput"); /* 选择链接文本 */ copyText.select(); copyText.setSelectionRange(0, 99999); /* 兼容移动设备 */ /* 复制链接到剪贴板 */ document.execCommand("copy"); /* 提示用户链接已复制 */ alert("链接已复制: " + copyText.value); } </script> </body> </html> ``` 这段代码会创建一个包含链接的输入框和一个按钮。当用户点击按钮时，链接会被复制到剪贴板，并弹出一个提示框显示已复制的链接。你可以将这段代码嵌入到你的网页中，然后根据需要修改链接和其他样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值