# clipboard.js
[![Build Status](http://img.shields.io/travis/zenorocha/clipboard.js/master.svg?style=flat)](https://travis-ci.org/zenorocha/clipboard.js)
![Killing Flash](https://img.shields.io/badge/killing-flash-brightgreen.svg?style=flat)
> Modern copy to clipboard. No Flash. Just 3kb gzipped.
<a href="https://clipboardjs.com/"><img width="728" src="https://cloud.githubusercontent.com/assets/398893/16165747/a0f6fc46-349a-11e6-8c9b-c5fd58d9099c.png" alt="Demo"></a>
## Why
Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework.
That's why clipboard.js exists.
## Install
You can get it on npm.
```
npm install clipboard --save
```
Or if you're not into package management, just [download a ZIP](https://github.com/zenorocha/clipboard.js/archive/master.zip) file.
## Setup
First, include the script located on the `dist` folder or load it from [a third-party CDN provider](https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers).
```html
<script src="dist/clipboard.min.js"></script>
```
Now, you need to instantiate it by [passing a DOM selector](https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-selector.html#L18), [HTML element](https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-node.html#L16-L17), or [list of HTML elements](https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-nodelist.html#L18-L19).
```js
new ClipboardJS('.btn');
```
Internally, we need to fetch all elements that matches with your selector and attach event listeners for each one. But guess what? If you have hundreds of matches, this operation can consume a lot of memory.
For this reason we use [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) which replaces multiple event listeners with just a single listener. After all, [#perfmatters](https://twitter.com/hashtag/perfmatters).
# Usage
We're living a _declarative renaissance_, that's why we decided to take advantage of [HTML5 data attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) for better usability.
### Copy text from another element
A pretty common use case is to copy content from another element. You can do that by adding a `data-clipboard-target` attribute in your trigger element.
The value you include on this attribute needs to match another's element selector.
<a href="https://clipboardjs.com/#example-target"><img width="473" alt="example-2" src="https://cloud.githubusercontent.com/assets/398893/9983467/a4946aaa-5fb1-11e5-9780-f09fcd7ca6c8.png"></a>
```html
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
```
### Cut text from another element
Additionally, you can define a `data-clipboard-action` attribute to specify if you want to either `copy` or `cut` content.
If you omit this attribute, `copy` will be used by default.
<a href="https://clipboardjs.com/#example-action"><img width="473" alt="example-3" src="https://cloud.githubusercontent.com/assets/398893/10000358/7df57b9c-6050-11e5-9cd1-fbc51d2fd0a7.png"></a>
```html
<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
```
As you may expect, the `cut` action only works on `<input>` or `<textarea>` elements.
### Copy text from attribute
Truth is, you don't even need another element to copy its content from. You can just include a `data-clipboard-text` attribute in your trigger element.
<a href="https://clipboardjs.com/#example-text"><img width="147" alt="example-1" src="https://cloud.githubusercontent.com/assets/398893/10000347/6e16cf8c-6050-11e5-9883-1c5681f9ec45.png"></a>
```html
<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
```
## Events
There are cases where you'd like to show some user feedback or capture what has been selected after a copy/cut operation.
That's why we fire custom events such as `success` and `error` for you to listen and implement your custom logic.
```js
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
```
For a live demonstration, go to this [site](https://clipboardjs.com/) and open your console.
## Tooltips
Each application has different design needs, that's why clipboard.js does not include any CSS or built-in tooltip solution.
The tooltips you see on the [demo site](https://clipboardjs.com/) were built using [GitHub's Primer](https://primer.style/css/components/tooltips). You may want to check that out if you're looking for a similar look and feel.
## Advanced Options
If you don't want to modify your HTML, there's a pretty handy imperative API for you to use. All you need to do is declare a function, do your thing, and return a value.
For instance, if you want to dynamically set a `target`, you'll need to return a Node.
```js
new ClipboardJS('.btn', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});
```
If you want to dynamically set a `text`, you'll return a String.
```js
new ClipboardJS('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
}
});
```
For use in Bootstrap Modals or with any other library that changes the focus you'll want to set the focused element as the `container` value.
```js
new ClipboardJS('.btn', {
container: document.getElementById('modal')
});
```
Also, if you are working with single page apps, you may want to manage the lifecycle of the DOM more precisely. Here's how you clean up the events and objects that we create.
```js
var clipboard = new ClipboardJS('.btn');
clipboard.destroy();
```
## Browser Support
This library relies on both [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) and [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) APIs. The first one is [supported by all browsers](https://caniuse.com/#search=selection) while the second one is supported in the following browsers.
| <img src="https://clipboardjs.com/assets/images/chrome.png" width="48px" height="48px" alt="Chrome logo"> | <img src="https://clipboardjs.com/assets/images/edge.png" width="48px" height="48px" alt="Edge logo"> | <img src="https://clipboardjs.com/assets/images/firefox.png" width="48px" height="48px" alt="Firefox logo"> | <img src="https://clipboardjs.com/assets/images/ie.png" width="48px" height="48px" alt="Internet Explorer logo"> | <img src="https://clipboardjs.com/assets/images/opera.png" width="48px" height="48px" alt="Opera logo"> | <img src="https://clipboardjs.com/assets/images/safari.png" width="48px" height="48px" alt="Safari logo"> |
|:---:|:---:|:---:|:---:|:---:|:---:|
| 42+ ✔ | 12+ ✔ | 41+ ✔ | 9+ ✔ | 29+ ✔ | 10+ ✔ |
The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying `Copied!` when `success` event is called and `Press Ctrl+C to copy` when `error` event is called because the text is already selected.
You can also check if clipboard.js is supported or not by running `ClipboardJS.isSupported()`, that way you can hide copy/cut buttons from the UI.
## Bonus
A browser extension that adds a "copy to clipboard" button to every code block on *GitHub, MDN, G
没有合适的资源?快使用搜索试试~ 我知道了~
PyPI 官网下载 | django-handyhelpers-0.0.43.tar.gz
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 187 浏览量
2022-01-10
17:27:23
上传
评论
收藏 1.2MB GZ 举报
温馨提示
共630个文件
js:459个
html:34个
py:27个
资源来自pypi官网。 资源全名:django-handyhelpers-0.0.43.tar.gz
资源推荐
资源详情
资源评论
收起资源包目录
PyPI 官网下载 | django-handyhelpers-0.0.43.tar.gz (630个子文件)
.babelrc 146B
setup.cfg 38B
zoom-cards.css 3KB
handyhelper-cards.css 2KB
zoom-groups.css 1KB
Chart.css 811B
Chart.min.css 521B
.editorconfig 465B
.editorconfig 465B
.editorconfig 465B
.editorconfig 465B
modals.htm 14KB
handyhelpers_base.htm 4KB
generic_list_content.htm 2KB
annual_progress_chart.htm 2KB
annual_trends_chart.htm 2KB
chart_set.htm 2KB
show_audit_log.htm 2KB
auditlog.htm 2KB
annual_trends_content.htm 2KB
generic_modal_form.htm 2KB
month_count_chart.htm 1KB
table_components.htm 1KB
year_count_chart.htm 1KB
week_count_chart.htm 1KB
annual_progress_content.htm 1KB
day_count_chart.htm 1KB
theme_colors.htm 1KB
generic_form.htm 994B
show_messages.htm 508B
chart_components.htm 393B
clipboard.htm 205B
zoom_cards.htm 170B
login.html 3KB
annual_stats.html 3KB
generic_about.html 3KB
generic_error.html 2KB
generic_index.html 2KB
generic_action.html 1KB
multiple.html 855B
constructor-nodelist.html 826B
contenteditable.html 824B
constructor-selector.html 806B
function-target.html 743B
nested.html 737B
constructor-node.html 736B
target-input.html 726B
target-textarea.html 720B
undelegate.html 715B
multiple.html 713B
function-text.html 709B
dropdown.html 708B
multiple.html 705B
target-div.html 697B
delegate.html 663B
editable.html 607B
destroy.html 590B
non-editable.html 578B
nodelist.html 560B
selector.html 545B
node.html 495B
register_user.html 482B
annual_progress.html 436B
annual_trends.html 346B
generic_list.html 309B
generic_list_no_component.html 205B
logged_out.html 79B
MANIFEST.in 262B
apis_template.jinja 2KB
apis_template_filters.jinja 1KB
admin.jinja 759B
serializers_template_set_fields.jinja 697B
serializers_template.jinja 679B
urls_template.jinja 486B
moment-with-locales.js 603KB
Chart.bundle.js 566KB
locales.js 434KB
Chart.js 419KB
moment-with-locales.min.js 361KB
locales.min.js 303KB
Chart.bundle.min.js 221KB
moment.js 170KB
Chart.min.js 169KB
moment.js 150KB
moment.min.js 57KB
clipboard.js 29KB
conversions.js 16KB
index.js 11KB
clipboard.min.js 10KB
ru.js 9KB
ru.js 8KB
ru.js 8KB
mr.js 7KB
cs.js 7KB
clipboard-action.js 7KB
hi.js 7KB
sl.js 7KB
uk.js 7KB
mr.js 6KB
mr.js 6KB
共 630 条
- 1
- 2
- 3
- 4
- 5
- 6
- 7
资源评论
挣扎的蓝藻
- 粉丝: 13w+
- 资源: 15万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- git使用文档(一步一步教你使用Git仓库管理代码)
- 进制转换(通用版).cpp
- linux实践之从DistroWatch排名第三的EndeavourOS转到排名第五的Manjaro工作机迁移
- Discuz模板+资讯博客课程干货+商业版(GBK+UTF)
- 基于Selenium的Java爬虫实战(内含谷歌浏览器Chrom和Chromedriver版本123.0.6292.0)
- RB308A-SOT23-5 单节锂电池保护IC 深圳市可芯电子有限公司.pdf
- Ubuntu下安装JDK
- 基于Selenium的Java爬虫实战(内含谷歌浏览器Chrom和Chromedriver版本123.0.6291.0)
- Android基础之用Eclipse建立工程
- WZLR(2).ipynb
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功