demo:复制粘贴功能

复制链接功能,也是为了方便用户一键“复制”,粘贴链接和文本到指定位置,在此,接着上一篇“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/

原文地址:https://www.cnblogs.com/missme-lina/p/10221230.html

时间: 2024-10-10 18:01:00

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

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

方案分析: 方案一:监听长按事件弹出PopupWindow[可行,缺点布局是固定的,小语种下会出现菜单截断现象] 方案二:弹出ContextMenu[不可行,因为ContextMenu的菜单是上下排列] 方案三:通过hierarchyviewer.bat查看可知,Editor的复制粘贴功能用的是toolbar,利用此功能也可实现[可行,代码量大] 方案四:通过查看Editor源码分析可知,只需要实现ActionMode.CallBack2接口,setMode即可实现[可行,简单实现接口,再添加少

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

在CMD命令行和PowerShell中实现复制粘贴功能 经常使用命令行或者PowerShell的朋友肯定会遇到这种情况:粘贴文本很简单,右键--选择粘贴即可,但是想要复制命令行或者PowerShell中的命令,倒是不知道怎么办了.其实只需要更改其属性. PS:PowerShell是基于任务的命令行外壳,这里和CMD命令行设置一样. 左键点击CMD处理程序左上角,选择属性.(或者按下Alt+空格). 选中快速编辑模式,点击确定. 这时,我们可以选择命令行中的文本了. 在新命令行中双击右键,即可实现

通过file读写功能实现文件复制粘贴功能

通过file读写功能实现文件复制粘贴功能 import java.io.*; public class Copy1M { public static void main(String arg[]) throws FileNotFoundException{ long begin = System.currentTimeMillis(); //记录程序开始事件 //**************************************获取文件属性***********************

通过如何通过js实现复制粘贴功能

在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>clipboard</title> <SCRIPT language=JavaS

Eclipse/MyEclipse中使用复制粘贴功能卡的解决办法

最近在MyEclipse中编辑代码时,使用快捷键进行复制粘贴,经常会导致编辑器短暂的停顿,光标不跟随,居然反应不过来,几近假死. 想来想去应该是编辑上的什么配置或者是IDE的什么功能导致,于是进入Preferences查找edit功能,进行一个个的测试,最后发现原来是代码的超链功能导致. 进入方法:Window -> Preferences -> General -> Editors -> Text Editors -> Hyperlinking 把超链的快捷键改为其他键比如

JS input文本框禁用右键和复制粘贴功能的代码

代码如下: 1 function click(e) 2 { 3 if (document.all) 4 { 5 if (event.button==1||event.button==2||event.button==3) 6 { 7 oncontextmenu='return false'; 8 } 9 } 10 if (document.layers) 11 { 12 if (e.which == 3) 13 { 14 oncontextmenu='return false'; 15 } 16

Robot 模拟操作键盘 实现复制粘贴功能;

1.代码逻辑 : a.封装一个粘贴的方法体:setAndctrlVClipboardData(String string);参数string是需要粘贴的内容 : b.声明一个StringSelection  stringSelection 对象来接受粘贴的内容: c.使用Toolkit 对象的setContents放需要粘贴的内容放入到粘贴板中:Toolkit.getDefaultToolkit().getSystemClipboad().setContents(contents, owner)

js 实现复制粘贴功能

<!DOCTYPE html> <!-- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> --> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8

关于 angular + 页面复制粘贴功能

<div class="user-token-content" *ngIf="tokenMark"> <div class="token-card"> <div class="token-card-content" id="copyInput"> {{tokenContent}} </div> <div class="token-card-co