[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-1733":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":28,"readmeContent":29,"aiSummary":30,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":31,"discoverSource":32},1733,"clipboard.js","zenorocha\u002Fclipboard.js","zenorocha",":scissors: Modern copy to clipboard. No Flash. Just 3kb gzipped :clipboard:","https:\u002F\u002Fclipboardjs.com",null,"JavaScript",34140,3912,411,11,0,2,6,1,45,"MIT License",false,"master",true,[26,27],"clipboard","javascript","2026-06-12 02:00:32","# clipboard.js\n\n![Build Status](https:\u002F\u002Fgithub.com\u002Fzenorocha\u002Fclipboard.js\u002Fworkflows\u002Fbuild\u002Fbadge.svg)\n![Killing Flash](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fkilling-flash-brightgreen.svg?style=flat)\n\n> Modern copy to clipboard. No Flash. Just 3kb gzipped.\n\n\u003Ca href=\"https:\u002F\u002Fclipboardjs.com\u002F\">\u003Cimg width=\"728\" src=\"https:\u002F\u002Fcloud.githubusercontent.com\u002Fassets\u002F398893\u002F16165747\u002Fa0f6fc46-349a-11e6-8c9b-c5fd58d9099c.png\" alt=\"Demo\">\u003C\u002Fa>\n\n## Why\n\nCopying 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.\n\nThat's why clipboard.js exists.\n\n## Install\n\nYou can get it on npm.\n\n```\nnpm install clipboard --save\n```\n\nOr if you're not into package management, just [download a ZIP](https:\u002F\u002Fgithub.com\u002Fzenorocha\u002Fclipboard.js\u002Farchive\u002Fmaster.zip) file.\n\n## Setup\n\nFirst, include the script located on the `dist` folder or load it from [a third-party CDN provider](https:\u002F\u002Fgithub.com\u002Fzenorocha\u002Fclipboard.js\u002Fwiki\u002FCDN-Providers).\n\n```html\n\u003Cscript src=\"dist\u002Fclipboard.min.js\">\u003C\u002Fscript>\n```\n\nNow, you need to instantiate it by [passing a DOM selector](https:\u002F\u002Fgithub.com\u002Fzenorocha\u002Fclipboard.js\u002Fblob\u002Fmaster\u002Fdemo\u002Fconstructor-selector.html#L18), [HTML element](https:\u002F\u002Fgithub.com\u002Fzenorocha\u002Fclipboard.js\u002Fblob\u002Fmaster\u002Fdemo\u002Fconstructor-node.html#L16-L17), or [list of HTML elements](https:\u002F\u002Fgithub.com\u002Fzenorocha\u002Fclipboard.js\u002Fblob\u002Fmaster\u002Fdemo\u002Fconstructor-nodelist.html#L18-L19).\n\n```js\nnew ClipboardJS('.btn');\n```\n\nInternally, 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.\n\nFor this reason we use [event delegation](https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F1687296\u002Fwhat-is-dom-event-delegation) which replaces multiple event listeners with just a single listener. After all, [#perfmatters](https:\u002F\u002Ftwitter.com\u002Fhashtag\u002Fperfmatters).\n\n# Usage\n\nWe're living a _declarative renaissance_, that's why we decided to take advantage of [HTML5 data attributes](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FGuide\u002FHTML\u002FUsing_data_attributes) for better usability.\n\n### Copy text from another element\n\nA 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.\n\nThe value you include on this attribute needs to match another's element selector.\n\n\u003Ca href=\"https:\u002F\u002Fclipboardjs.com\u002F#example-target\">\u003Cimg width=\"473\" alt=\"example-2\" src=\"https:\u002F\u002Fcloud.githubusercontent.com\u002Fassets\u002F398893\u002F9983467\u002Fa4946aaa-5fb1-11e5-9780-f09fcd7ca6c8.png\">\u003C\u002Fa>\n\n```html\n\u003C!-- Target -->\n\u003Cinput id=\"foo\" value=\"https:\u002F\u002Fgithub.com\u002Fzenorocha\u002Fclipboard.js.git\" \u002F>\n\n\u003C!-- Trigger -->\n\u003Cbutton class=\"btn\" data-clipboard-target=\"#foo\">\n  \u003Cimg src=\"assets\u002Fclippy.svg\" alt=\"Copy to clipboard\" \u002F>\n\u003C\u002Fbutton>\n```\n\n### Cut text from another element\n\nAdditionally, you can define a `data-clipboard-action` attribute to specify if you want to either `copy` or `cut` content.\n\nIf you omit this attribute, `copy` will be used by default.\n\n\u003Ca href=\"https:\u002F\u002Fclipboardjs.com\u002F#example-action\">\u003Cimg width=\"473\" alt=\"example-3\" src=\"https:\u002F\u002Fcloud.githubusercontent.com\u002Fassets\u002F398893\u002F10000358\u002F7df57b9c-6050-11e5-9cd1-fbc51d2fd0a7.png\">\u003C\u002Fa>\n\n```html\n\u003C!-- Target -->\n\u003Ctextarea id=\"bar\">Mussum ipsum cacilds...\u003C\u002Ftextarea>\n\n\u003C!-- Trigger -->\n\u003Cbutton class=\"btn\" data-clipboard-action=\"cut\" data-clipboard-target=\"#bar\">\n  Cut to clipboard\n\u003C\u002Fbutton>\n```\n\nAs you may expect, the `cut` action only works on `\u003Cinput>` or `\u003Ctextarea>` elements.\n\n### Copy text from attribute\n\nTruth 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.\n\n\u003Ca href=\"https:\u002F\u002Fclipboardjs.com\u002F#example-text\">\u003Cimg width=\"147\" alt=\"example-1\" src=\"https:\u002F\u002Fcloud.githubusercontent.com\u002Fassets\u002F398893\u002F10000347\u002F6e16cf8c-6050-11e5-9883-1c5681f9ec45.png\">\u003C\u002Fa>\n\n```html\n\u003C!-- Trigger -->\n\u003Cbutton\n  class=\"btn\"\n  data-clipboard-text=\"Just because you can doesn't mean you should — clipboard.js\"\n>\n  Copy to clipboard\n\u003C\u002Fbutton>\n```\n\n## Events\n\nThere are cases where you'd like to show some user feedback or capture what has been selected after a copy\u002Fcut operation.\n\nThat's why we fire custom events such as `success` and `error` for you to listen and implement your custom logic.\n\n```js\nvar clipboard = new ClipboardJS('.btn');\n\nclipboard.on('success', function (e) {\n  console.info('Action:', e.action);\n  console.info('Text:', e.text);\n  console.info('Trigger:', e.trigger);\n\n  e.clearSelection();\n});\n\nclipboard.on('error', function (e) {\n  console.error('Action:', e.action);\n  console.error('Trigger:', e.trigger);\n});\n```\n\nFor a live demonstration, go to this [site](https:\u002F\u002Fclipboardjs.com\u002F) and open your console.\n\n## Tooltips\n\nEach application has different design needs, that's why clipboard.js does not include any CSS or built-in tooltip solution.\n\nThe tooltips you see on the [demo site](https:\u002F\u002Fclipboardjs.com\u002F) were built using [GitHub's Primer](https:\u002F\u002Fprimer.style\u002Fcss\u002Fcomponents\u002Ftooltips). You may want to check that out if you're looking for a similar look and feel.\n\n## Advanced Options\n\nIf 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.\n\nFor instance, if you want to dynamically set a `target`, you'll need to return a Node.\n\n```js\nnew ClipboardJS('.btn', {\n  target: function (trigger) {\n    return trigger.nextElementSibling;\n  },\n});\n```\n\nIf you want to dynamically set a `text`, you'll return a String.\n\n```js\nnew ClipboardJS('.btn', {\n  text: function (trigger) {\n    return trigger.getAttribute('aria-label');\n  },\n});\n```\n\nFor 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.\n\n```js\nnew ClipboardJS('.btn', {\n  container: document.getElementById('modal'),\n});\n```\n\nAlso, 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.\n\n```js\nvar clipboard = new ClipboardJS('.btn');\nclipboard.destroy();\n```\n\n## Browser Support\n\nThis library relies on both [Selection](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FSelection) and [execCommand](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FDocument\u002FexecCommand) APIs. The first one is [supported by all browsers](https:\u002F\u002Fcaniuse.com\u002F#search=selection) while the second one is supported in the following browsers.\n\n| \u003Cimg src=\"https:\u002F\u002Fclipboardjs.com\u002Fassets\u002Fimages\u002Fchrome.png\" width=\"48px\" height=\"48px\" alt=\"Chrome logo\"> | \u003Cimg src=\"https:\u002F\u002Fclipboardjs.com\u002Fassets\u002Fimages\u002Fedge.png\" width=\"48px\" height=\"48px\" alt=\"Edge logo\"> | \u003Cimg src=\"https:\u002F\u002Fclipboardjs.com\u002Fassets\u002Fimages\u002Ffirefox.png\" width=\"48px\" height=\"48px\" alt=\"Firefox logo\"> | \u003Cimg src=\"https:\u002F\u002Fclipboardjs.com\u002Fassets\u002Fimages\u002Fie.png\" width=\"48px\" height=\"48px\" alt=\"Internet Explorer logo\"> | \u003Cimg src=\"https:\u002F\u002Fclipboardjs.com\u002Fassets\u002Fimages\u002Fopera.png\" width=\"48px\" height=\"48px\" alt=\"Opera logo\"> | \u003Cimg src=\"https:\u002F\u002Fclipboardjs.com\u002Fassets\u002Fimages\u002Fsafari.png\" width=\"48px\" height=\"48px\" alt=\"Safari logo\"> |\n| :-------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: |\n|                                                   42+ ✔                                                   |                                                 12+ ✔                                                 |                                                    41+ ✔                                                    |                                                       9+ ✔                                                       |                                                  29+ ✔                                                  |                                                   10+ ✔                                                   |\n\nThe 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.\n\nYou can also check if clipboard.js is supported or not by running `ClipboardJS.isSupported()`, that way you can hide copy\u002Fcut buttons from the UI.\n\n## Bonus\n\nA browser extension that adds a \"copy to clipboard\" button to every code block on _GitHub, MDN, Gist, StackOverflow, StackExchange, npm, and even Medium._\n\nInstall for [Chrome](https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fcodecopy\u002Ffkbfebkcoelajmhanocgppanfoojcdmg) and [Firefox](https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fcodecopy\u002F).\n\n## License\n\n[MIT License](https:\u002F\u002Fzenorocha.mit-license.org\u002F) © Zeno Rocha\n","clipboard.js 是一个用于现代浏览器中复制文本到剪贴板的轻量级库，无需 Flash 支持，压缩后仅 3KB。其核心功能包括通过简单的 HTML5 数据属性（如 `data-clipboard-target` 和 `data-clipboard-action`）来定义需要复制的内容及其触发方式，支持事件委托以优化性能，适用于任何需要用户快速复制网页内容而不增加页面加载负担的应用场景，如在线文档、代码示例展示等。","2026-06-11 02:45:44","top_all"]