clipboard.js 介绍
clipboard.js 使用的原因?
复制 文字 到剪切板不应该很难去实现。它不需要配置几十个步骤或者加载几百 KB 的 文件 。最重要的是,它不应该依赖 Flash 或其他臃肿的框架。这是 clipboard.js 诞生的原因。
浏览器兼容IE9以及IE9+和其他新版浏览器。clipboard 调用 方法 友好,实现方式多样,亦可 自定义 文本 获取 方案。
clipboard.js安装
npm install clipboard --save
clipboard.js基本使用
首先需要您需要通过传递DOM选择器,html元素或html元素列表来实例化它。
new Clipboard('.btn');
1用 一个 元素当触发器来复制另 一个 元素的文本,data-clipboard-target 属性 后需要跟 属性 选择器
<!-- Target -->
<input id="foo" value="https://github.com/ze nor ocha/clipboard.js.git">
<!-- Trigger -->
<button data-clipboard-target="#foo">
</button>
另外还有另外 一个 属性 data-clipboard-action 属性 ,以指定是要要么 cop y还是要cut操作。 默 认情况下是 cop y。cut操作只适用于<input>或<textarea>元素。
<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
2从 属性 中复制文本,不需要另 一个 元素当触发器,可以使用data-clipboard-text 属性 ,在后面放上需要复制的文本.
<button data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
cop y to clipboard
</button>
网站地址 : https://clipboardjs.com/
GitHub: https://github.com/zenorocha/clipboard.js
网站描述: 浏览器中复制文本到剪贴板的 插件 ,不需要Flash,仅仅2kb
clipboard.js官方网站
官方网站: https://clipboardjs.com/
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。