复制链接功能,也是为了方便用户一键“复制”,粘贴链接和文本到指定位置,在此,接着上一篇“demo:生成专属二维码link ”来记录一键“复制”的实现。

相关插件

<!--布局:  按钮  输入框-->
<a href="###" class="copylinkbtn" data-clipboard-target="#myLink">复制链接</a>
<input type="text" class = "copylink" id="myLink" value=""/><!--输入框必须要,页面没展示,就使用障眼法,定位定出去-->
<!--复制成功-->
<div class="prompt_box">
<span>复制链接成功!</span>
</div>
<!--引用相关js:-->
<script src="jquery.min.js"></script>
<script src="clipboard.min.js"></script>

js的使用

$(document).ready(function(){
var myCodeUrl = "https://home.cnblogs.com/u/missme-lina"
$('.copylink').val(myCodeUrl);
console.log($('.copylink').val());
copy();
//复制功能
function copy(){
var clipboard = new Clipboard('.copylinkbtn');
//提示复制成功
clipboard.on('success', function(e) {
$('.prompt_box').show();
setTimeout(function(){$(".prompt_box").hide();},2000);//2秒后执行该方法
e.clearSelection();
});
clipboard.on('error', function(e) {
alert('sorry,该浏览器暂不支持复制功能,请升级或选择其他浏览器后重试!')
});
}
});

实现效果

jquery.qrcode.js的API

请自己转载官方文档:https://clipboardjs.com/

demo:复制粘贴功能的更多相关文章

  1. Android EditText 取消复制粘贴功能,取消横向全屏编辑功能(一)

    在做一些安全性的软件时候常常要考虑取消 EditText 上的复制粘贴功能以确保安全性.下面就记录了这个方法: 首先在API-11以下的版本很简单,只需要在Xml布局文件或者用代码把长按属性设置成fa ...

  2. 在CMD命令行和PowerShell中实现复制粘贴功能

    在CMD命令行和PowerShell中实现复制粘贴功能         常常使用命令行或者PowerShell的朋友肯定会遇到这样的情况:粘贴文本非常easy,右键--选择粘贴就可以,可是想要复制命令 ...

  3. 仿复制粘贴功能,长按弹出tips的实现

    方案分析: 方案一:监听长按事件弹出PopupWindow[可行,缺点布局是固定的,小语种下会出现菜单截断现象] 方案二:弹出ContextMenu[不可行,因为ContextMenu的菜单是上下排列 ...

  4. iOS开发之--复制粘贴功能

    复制粘贴功能,代码如下: 1.复制功能 UIPasteboard *pasteboard = [UIPasteboard generalPasteboard]; pasteboard.string = ...

  5. Java io流完成复制粘贴功能

    JAVA 中io字节输入输出流 完成复制粘贴功能: public static void main(String[] args) throws Exception{        // 创建输入流要读 ...

  6. js实现复制粘贴功能

    在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 另一篇是禁止复制粘贴 前端er怎样操作剪切复制以及禁止复制+破解等 初步想法: 1. ...

  7. Vbox中unbuntu15.10与win10共享文件 及开启复制粘贴功能

    学习linux,一直使用的是VMware虚拟机,虽然功能很强大,但总感觉页面切换很麻烦.所以转入Vbox的使用,下面介绍下unbuntu15.10与win10共享文件. 一 共享文件夹 步骤1:启动u ...

  8. Winform 使用热键功能实现Ctrl+C和Ctrl+V复制粘贴功能

    当我们使用winform控件的时候,会发现这些控件(比如Label)不支持Ctrl+c 复制和Ctrl+v 快捷键复制粘贴功能,如果我们需要实现这个功能改怎么做呢? 1. 首先我们创建一个winfor ...

  9. .NET 实现复制粘贴功能

    老是把自己当作珍珠,就时时有怕被埋没的痛苦.把自己当作泥土吧,让众人把你踩成一条道路. -----<泥土>鲁藜 .NET如何实现复制粘贴功能,具体代码如下: aspx文件: <div ...

  10. ubuntu18.04下取消中键复制粘贴功能

    Q: armlinux开发,主机采用ubuntu18.04操作系统,使用过程中关于鼠标中键有如下操作现象, 操作: 1.选中文本, 2.将鼠标光标定位到要插入的位置 3.按下鼠标中键 现象:将自动复制 ...

随机推荐

  1. 解决C#中调用WCF方法报错:远程服务器返回错误 (404) 未找到

    IIS配置问题,解决方法: 1. 首先添加MIME类型 扩展名“.svc”,MIME类型 “application/octet-stream” 2.处理程序映射--添加托管处理程序 请求路径 “.sv ...

  2. 11.翻译系列:在EF 6中配置一对零或者一对一的关系【EF 6 Code-First系列】

    原文链接:https://www.entityframeworktutorial.net/code-first/configure-one-to-one-relationship-in-code-fi ...

  3. 关于JavaScript的操作

    一:js基础. 1. var是定义js变量的关键字. 如: var leng=5;定义一个变量为5 var length = 16; // Number 通过数字字面量赋值 var points = ...

  4. 关于 redis的操作

    1.修改配置文件 redis.conf是redis的配置文件,redis.conf在redis源码目录. 注意修改port作为redis进程的端口,port默认6379.如果需要搭建redis集群,千 ...

  5. 使用tinymce富文本

    1.tinymce入门参考 https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/ 2.tinymce安装选项 htt ...

  6. IPv6技术详解:基本概念、应用现状、技术实践(下篇)

    本文来自微信技术架构部的原创技术分享. 1.前言 在上篇<IPv6技术详解:基本概念.应用现状.技术实践(上篇)>,我们讲解了IPV6的基本概念. 本篇将继续从以下方面展开对IPV6的讲解 ...

  7. Spark Core

    Spark Core    DAG概念        有向无环图        Spark会根据用户提交的计算逻辑中的RDD的转换(变换方法)和动作(action方法)来生成RDD之间的依赖关系,同时 ...

  8. 机器学习与Tensorflow(7)——tf.train.Saver()、inception-v3的应用

    1. tf.train.Saver() tf.train.Saver()是一个类,提供了变量.模型(也称图Graph)的保存和恢复模型方法. TensorFlow是通过构造Graph的方式进行深度学习 ...

  9. 利用history.pushState()实现页面无刷新更新

    本来是在研究vue-router如何记录滚动位置,点返回的时候还是回到原来的位置,看到有人说的history.state存了一个值,才把history研究一下,发现 history.pushState ...

  10. 解决Chrome浏览器主页被hao123、360和2345篡改简单有效方法

    转自:https://blog.csdn.net/qq_32635971/article/details/72793115?locationNum=10&fps=1 当你打开浏览器看到各种首页 ...