复制链接功能,也是为了方便用户一键“复制”,粘贴链接和文本到指定位置,在此,接着上一篇“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. Alpha代码规范、冲刺任务与计划

    Alpha代码规范.冲刺任务与计划 团队名称: 云打印 作业要求: Alpha代码规范.冲刺任务与计划 作业目标:代码规范.冲刺任务与计划. 团队队员 队员学号 队员姓名 个人博客地址 备注 2216 ...

  2. 【算法python实现】 -- 不同路径II

    原题:https://leetcode-cn.com/problems/unique-paths-ii/ 思路 与上题相同,不过是加了路障.地图上每一格都有两个状态,有路障或无路障,分别以1和0表示其 ...

  3. cad2008 参照面板 在位编辑后无法使用

    有时候在位编辑之后,保存在位编辑了,可是参照面板无法动了,这个时候只要保存一下,然后ctrl+z,就可以解决了..蛮神奇的,我还没想到如何用代码去搞定它..

  4. c# 遍历所有安装程序 获取所有已经安装的程序

    /// <summary> /// 获取所有已经安装的程序 /// </summary> /// <param name="reg"></ ...

  5. 漏洞应急响应之批量poc验证

    1.文章难易度 [★★★] 2.文章知识点: python,poc验证; 3.文章作者: 野驴 4.本文参与 i春秋学院原创文章奖励计划,未经许可禁止转载! 0x01前言 当互联网爆出高危漏洞,或者团 ...

  6. 移动端IM开发者必读(二):史上最全移动弱网络优化方法总结

    1.前言 本文接上篇<移动端IM开发者必读(一):通俗易懂,理解移动网络的“弱”和“慢”>,关于移动网络的主要特性,在上篇中已进行过详细地阐述,本文将针对上篇中提到的特性,结合我们的实践经 ...

  7. JavaScript中的constructor和继承

    概述 这是我在看JavaScript面向对象编程指南的时候,对constructor和继承的总结. 关于它们的详细知识,可以上网查到,所以我只写那些网上没有的. 内容 constructor的理解 c ...

  8. spring boot 集成jsp

    刚开始操作的时候,遇到了个问题,在这记录一下.(因为自己是个新手,对maven项目结构不了解) 1.大概创建步骤如下 File-New-Project-Spring Initializr ,type选 ...

  9. [视频]K8飞刀 解密菜刀后门教程

    链接:https://pan.baidu.com/s/1raC1S_njxeqS7TaiTN6jLA 提取码:otmb

  10. 测试工具之Jmeter(创建一个简单测试用例)

    前面介绍了如何使用badboy录制jmeter脚本,以及如何导入脚本并进行测试 这里介绍下手动创建测试用例,主要步骤如下: 1.创建线程组 第一次打开Jmeter只有一个测试计划,右键“测试计划”选择 ...