clipboard_js使用步骤
原文引用 大专栏 https://www.dazhuanlan.com/2019/08/26/5d6333b0afb5c/
使用步骤
使用clipboard.js
来可分为以下三个步骤:
- 定义相关的html标签
- 引入clisboard.js库,引入方式:
- 可以使用CDN:
- 也可以先下载到本地,然后引入本地。
- 下载可以:
- 直接下载压缩包download a ZIP ,
- 或者使用npm方式安装:
npm install clipboard --save
- 实例化ClipboardJS对象
- 实例化之后可以加上监听复制成功或失败。以便给用户一些提示信息。
属性说明
- data-clipboard-text:复制的静态内容
- data-clipboard-target:设置为其他元素的选择器,将复制该选择器中元素的内容
- data-clipboard-action: 复制的方式,
- data-clipboard-action=”copy” :复制方式。默认
- data-clipboard-action=”cut”: 剪切方式。
使用实例
使用的区别主要在引入方式和ClipboardJS对象的实例化上。
使用HTML DOM选择器实例化
1 |
|
点击按钮会把data-clipboard-text
这个属性的值文本复制到剪贴板中,这种方式使用无复制静态的文本。
使用HTML元素实例化
1 |
|
使用html元素列表实例化
1 |
|
复制静态文本
上面的例子都是复制按钮自己属性中的静态文本中。但是如果想要点击按钮,复制文本框中的内容则不能这么写:
复制其他元素的内容
复制一个内容
1 |
|
效果:
这里的按钮称为触发元素
,被复制的元素称为目标元素。此时data-clipboard-target的值为目标元素(文本框)的选择器,而data-clipboard-target的属性被设置在触发元素(按钮)上
可以发现,复制完毕后文本框中的文本处于选中状态,可以使用e.clearSelection();
方法取消选中状态。
1 |
<script> |
这种方式,文本框中输入什么,就复制什么。复制的内容可以是动态的,目标元素的值发生变化,复制的值也发生变化。适用于,复制内容不固定的情况。
复制多个内容的情况
1 |
|
剪切方式
1 |
|
参考链接
官网文档:https://clipboardjs.com/
使用HTML DOM选择器实例化:https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-selector.html#L18
使用使用HTML元素实例化:https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-node.html#L16-L17
使用html元素列表实例化:https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-nodelist.html#L18-L19
https://www.jb51.net/article/125914.htm
https://www.cnblogs.com/yunser/p/7628031.html
原文地址:https://www.cnblogs.com/petewell/p/11410964.html
- jboss eap 6.3 域(Domain)模式配置
- 揭穿数据分析的12个神话
- jboss eap 6.3 集群(cluster)配置
- Django中Q查询及Q()对象
- jboss eap 6.3 集群(cluster)-Session 复制(Replication)
- JSP中的Servlet及Filter
- Django ORM详解
- Web前端培训:怎样成长为一个优秀的Web 前端开发工程师?
- Git操作
- 人工智能做的肉,你想吃吗?
- 二、爬虫基础库
- 鱼与熊掌兼得,既要云服务创新也要管理传统网络
- Django-model进阶(中介模型,查询优化,extra,整体插入)
- flask-session组件
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 委托的好处
- Elasticsearch安装和配置
- Notes | QUAIDS 模型
- Stata | 520,听说你也想快点找到...
- Stata | 批量替换变量值的小技巧
- 手把手教你完成课设作业使用Pandas对海平面温度异常进行分析,小白也能看的懂
- 谈谈自学 Stata 的体会
- Latex修改字体字号的大小
- Notes | GitHub Upload Large Files
- PPT 中插入图片的几个小技巧
- Stata | 整理调查问卷修改内容清单
- LaTeX | 绘制微观经济学图形
- Python | 地址数据清理相关的库
- 【Redis数据结构 序】使用redis-py操作Redis数据库
- 【Redis数据结构 String类型】String类型生产中的应用 缓存、计数器、限速器的实现