js实现复制|剪切指定内容到粘贴板--clipboard
这是著名开源项目 clipboard.js 的 README.md,里面讲解的更加详细,有兴趣的同学可以了解一下。
项目地址:https://github.com/zenorocha/clipboard.js
下面我就简单记录一下,我对clipboard.js的小小见解。
安装:
npm install clipboard --save
安装完成后,会在项目目录下的node_modules文件夹下找到clipboard文件夹
注:如果不是vue项目,可以去官网https://clipboardjs.com/下载js,通过<script src='clipboard.js'></script>使用
使用:
在需要使用的地方引入import Clipboard from 'clipboard'
html部分:

注:给按钮添加两个属性--data-clipboard-target和data-clipboard-action
data-clipboard-target属性的值就是能匹配到另一个元素的选择器;data-clipboard-action属性来指明你想要复制(copy)还是剪切(cut)内容,默认copy;
还需要注意的是如果设置cut动作只在 <input> 或 <textarea> 元素起作用。
如果你不需要从另一个元素来复制内容。你仅需要给目标元素设置一个 data-clipboard-text 属性就可以了; data-clipboard-text 属性值为你设置的固定内容。
js部分:

最后,如果你使用单页应用,你可能想要更加精确地管理 DOM 的生命周期。你可以清理事件以及创建的对象。
clipboard.destroy();
js实现复制|剪切指定内容到粘贴板--clipboard的更多相关文章
- js插件实现点击复制内容到粘贴板,兼容IE8
先来看下本次需要导入的文件: 第一个是jquery.js,这个不多说: 第二个是jquery.zclip.js,第三个是zeroClipboard.swf ,这两个文件的下载链接:http://www ...
- js实现复制内容到粘贴板
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- js点击按钮复制内容到粘贴板
复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...
- vue复制textarea文本域内容到粘贴板
vue实现复制内容到粘贴板 方案:找到textarea对象(input同样适用),获取焦点,选中textarea的所有内容,并调用document.execCommand("copy&q ...
- js 实现复制剪切
原生js实现复制 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- vue 复制内容到粘贴板
首先是npm安装依赖包:npm install clipboard --save 导入组件:import Clipboard from "clipboard"; html如图: c ...
- Intellij IDE使用 ideavim,不能复制文档到系统粘贴板
vim的yank命令默认不会复制到系统粘贴板,而是粘贴到寄存器.你可以使用* 或 +寄存器来访问系统粘贴板. 在~/.ideavimrc (如果不存在就创建) 中添加下列选项 set clipboar ...
- JS 操作复制剪切粘贴
测试了很多次之后,虽然有点细碎的突破,但还是想说,麻辣隔壁... 众所周知使用 oncut/oncopy/onpaste 监听剪切板,采用 window.clipboardData 并不是适用于大多浏 ...
- js 复制内容到粘贴板的兼容性
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...
随机推荐
- MVC默认提供了一个异常过滤器 HandleErrorAttribte特性
这一篇记录MVC默认提供了一个异常过滤器 HandleErrorAttribte,下一篇介绍自定义异常过滤特性. 参考引用:https://www.cnblogs.com/TomXu/archive/ ...
- 【leetcode】sudokuSolver数独解题
0.摘要 小时候在报纸上玩过数独,那时候觉得很难,前几天在leetcode上遇到了这个题,挺有意思于是记录下来 一般一道数独题,就像他给的例子这样,9*9的格子,满足 行,列 ,宫均取1-9的数,切互 ...
- SVN server 服务端修改端口号
SVN server 服务端修改端口号 在实际使用中可能当安装svn server 服务后,发现与后续其他程序端口冲突, 1.打开svn server 管理界面->操作->properti ...
- BZOJ 3622: 已经没有什么好害怕的了(二项式反演)
传送门 解题思路 首先将\(a\),\(b\)排序,然后可以算出\(t(i)\),表示\(a(i)\)比多少个\(b(i)\)大,根据容斥套路,设\(f(k)\)表示恰好有\(k\)个\(a(i)\) ...
- hdu 5279 YJC plays Minecraft——生成函数
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5279 令 n 个点的树的 EGF 是 g(x) ,则 \( g(x) = \sum\limits_{i=0 ...
- javascript 对象的设计模式
1.为什么学习设计模式:http://www.iteye.com/news/32092 或 https://blog.csdn.net/pigpigpig4587/article/details ...
- echarts 柱状图 X(Y)轴数据过多时,滑动以及内置缩放的问题
前言:在开发中碰到的情况(菜鸟出门). 在使用echarts 图表的时候发现要展示的数据过多,但是系统留的展示框太小,造成数据都挤压在一块(不好看而且新感觉很不专业). ...
- PHP如何进行错误与异常处理(PHP7中的异常处理和之前版本异常处理的区别)
PHP如何进行错误与异常处理(PHP7中的异常处理和之前版本异常处理的区别) 一.总结 一句话总结: throwable接口+Error类 在PHP7更新中有一条:更多的Error变为可捕获的Exce ...
- 46、tensorflow入门初步,手写识别0,1,2,3,4,5,6
1.使用tensorflow的SoftMax函数,对手写数字进行识别 Administrator@SuperComputer MINGW64 ~ $ docker run -it -p 8888:88 ...
- shell 字符串匹配变量(只取数字或者取固定字符串)
var1=abc3559 #想要获得3559 操作: var1_key=`echo $var1 | tr -cd "[0-9]"` https://www.cnblogs.co ...