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& ...
随机推荐
- js判断设备(转)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JSON和fastjson
一.JSON 语法规则: 数据在名称/值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 名称/值对-->对象-->数组 JSON 名称/值对 JSON 数据的书写格式是:名称/值对. ...
- Vue.js(七)
ES6 默认导出(只能一次)与默认导入 默认导出: // 当前文件模块为 test.js // 定义私有成员 a 和 c let a = 10 let c = 20 // 外界访问不到变量 d ,因为 ...
- Centos MySQL 5.7安装、升级教程
MySQL 5.7安装.升级笔记分享: 卸载当前的 MySQL 查看当前 MySQL 版本: ? 1 2 [root@coderknock ~]# mysql -V mysql Ver 14.14 D ...
- python 标准模块和第三方模块
>>> help('modules') Please wait a moment while I gather a list of all available modules... ...
- 在angular项目中使用bootstrap的tooltip插件时,报错Property 'tooltip' does no t exist on type 'JQuery<HTMLElement>的解决方法和过程
在angular4的项目中需要使用bootstrap的tooltip插件. 1. 使用命令安装jQuery和bootstrap npm install bootstrap jquery --save ...
- 用JOptionPane类实现各种对话框
用JOptionPane类实现各种对话框 运行结果: 下面部分参考: JOptionPane类提示框的一些常用的方法 - - ITeye博客 http://847353020-qq-com.itey ...
- ICO和区块链区别
区块链项目众筹(ICO)浅析 2017-07-25 原创 Fintech科普大使 ICO是区块链初创公司项目融资的重要方式类似于Kickstarter众筹,但有不同之处(具体在下一节详述),可以避开传 ...
- 优化问题及KKT条件
整理自其他优秀博文及自己理解. 目录 无约束优化 等式约束 不等式约束(KKT条件) 1.无约束优化 无约束优化问题即高数下册中的 “多元函数的极值" 部分. 驻点:所有偏导数皆为0的点: ...
- MySQL concat、concat_ws 和 group_concat 的用法
一.CONCAT()函数CONCAT()函数用于将多个字符串连接成一个字符串.使用数据表Info作为示例,其中SELECT id,name FROM info LIMIT 1;的返回结果为+----+ ...