mirror of
https://github.com/zenorocha/clipboard.js.git
synced 2023-08-10 21:12:48 +03:00
200 lines
9.4 KiB
HTML
200 lines
9.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>clipboard.js</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="A modern approach to copy text to clipboard. No Flash. No dependencies. Just 2kb">
|
|
|
|
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
|
<link rel="stylesheet" href="bower_components/primer-css/css/primer.css">
|
|
<link rel="stylesheet" href="bower_components/highlightjs/styles/github.css">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900">
|
|
<link rel="stylesheet" href="assets/main.css">
|
|
</head>
|
|
<body>
|
|
<header class="header gradient text-center">
|
|
<h1 class="title">clipboard.js</h1>
|
|
<h2 class="subtitle">A modern approach to copy text to clipboard</h2>
|
|
<h2 class="subtitle">No Flash. No dependencies. Just 2kb</h2>
|
|
<p class="gh-btns">
|
|
<iframe src="http://ghbtns.com/github-btn.html?user=zenorocha&repo=clipboard.js&type=watch&count=true&size=large"
|
|
allowtransparency="true" frameborder="0" scrolling="0" width="152" height="30"></iframe>
|
|
<iframe src="http://ghbtns.com/github-btn.html?user=zenorocha&repo=clipboard.js&type=fork&count=true&size=large"
|
|
allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"></iframe>
|
|
</p>
|
|
</header>
|
|
|
|
<main class="wrap">
|
|
<h1 id="install">Install</h1>
|
|
|
|
<p>You can get it on npm.</p>
|
|
|
|
<pre><code class="js">npm install clipboard --save</code></pre>
|
|
|
|
<p>Or bower, too.</p>
|
|
|
|
<pre><code class="js">bower install clipboard --save</code></pre>
|
|
|
|
<p>If you're not into package management, just <a href="https://github.com/zenorocha/clipboard.js/archive/master.zip">download a ZIP</a> file.</p>
|
|
|
|
<h1 id="setup">Setup</h1>
|
|
|
|
<p>First, include the script located on the <code>dist</code> folder.</p>
|
|
|
|
<pre><code class="html"><script src="dist/clipboard.min.js"></script></code></pre>
|
|
|
|
<p>Now, you need to instantiate it using a DOM selector. This selector corresponds to the trigger element, i.e. <code><button></code>.</p>
|
|
|
|
<pre><code class="js">new Clipboard('.btn');</code></pre>
|
|
|
|
<h1 id="usage">Usage</h1>
|
|
|
|
<p>We're living a <em>declarative renaissance</em>, that's why we decided to take advantage of <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML5 data attributes</a> for better usability.</p>
|
|
|
|
<h3>Copy text from attribute</h3>
|
|
|
|
<p>The easiest way to copy some content to the clipboard, is to include a <code>data-text</code> attribute in your trigger element.</p>
|
|
|
|
<div id="example-1" class="example">
|
|
<div class="flash flash-error hidden"></div>
|
|
|
|
<button class="btn" data-action="copy" data-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
|
|
</div>
|
|
|
|
<pre><code class="html"><!-- Trigger -->
|
|
<button class="btn" data-text="Just because you can doesn't mean you should — clipboard.js">
|
|
Copy to clipboard
|
|
</button></code></pre>
|
|
|
|
<h3>Copy text from another element</h3>
|
|
|
|
<p>Alternatively, you can copy content from another element by adding a <code>data-target</code> attribute in your trigger element.</p>
|
|
<p>The value you include on this attribute needs to match another's element <code>id</code> attribute.</p>
|
|
|
|
<div id="example-2" class="example">
|
|
<div class="flash flash-error hidden"></div>
|
|
|
|
<div class="input-group">
|
|
<input id="foo" type="text" value="https://github.com/zenorocha/clipboard.js.git">
|
|
<span class="input-group-button">
|
|
<button aria-label="Copy to clipboard" class="btn" type="button" data-target="foo">
|
|
<img class="clippy" src="assets/clippy.svg" width="13" alt="Copy to clipboard">
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<pre><code class="html"><!-- Target -->
|
|
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
|
|
|
|
<!-- Trigger -->
|
|
<button class="btn" data-target="foo">
|
|
<img src="assets/clippy.svg" alt="Copy to clipboard">
|
|
</button></code></pre>
|
|
|
|
<h3>Cut text from another element</h3>
|
|
|
|
<p>Additionally, you can define a <code>data-action</code> attribute to specify if you want to either <code>copy</code> or <code>cut</code> content.</p>
|
|
<p>If you omit this attribute, <code>copy</code> will be used by default.</p>
|
|
|
|
<div id="example-3" class="example">
|
|
<div class="flash flash-error hidden"></div>
|
|
|
|
<div class="input-group">
|
|
<textarea id="bar" cols="62" rows="4" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga.</textarea>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button class="btn" type="button" data-action="cut" data-target="bar">
|
|
Cut to clipboard
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<pre><code class="html"><!-- Target -->
|
|
<textarea id="bar">Mussum ipsum cacilds...</textarea>
|
|
|
|
<!-- Trigger -->
|
|
<button class="btn" data-action="cut" data-target="bar">
|
|
Cut to clipboard
|
|
</button></code></pre>
|
|
|
|
<p>As you may expect, the <code>cut</code> action only works on <code><input></code> or <code><textarea></code> elements.</p>
|
|
|
|
<h1 id="events">Events</h1>
|
|
|
|
<p>There are cases where you'd like to capture what has been copied/cut or even check if there was an error.</p>
|
|
|
|
<p>That's why we fire custom events such as <code>success</code> and <code>error</code> for you to listen and implement your custom logic.</p>
|
|
|
|
<p>But to achieve that, first you need to access the <code>triggers</code> property from your clipboard instance.</p>
|
|
|
|
<pre><code class="js">var clipboard = new Clipboard('.btn');
|
|
var btns = clipboard.triggers;</code></pre>
|
|
|
|
<p>Internally, this property is just a collections of nodes resulted from a <code>querySelectorAll</code> operation. So all you have to do now is loop through that collection and attach listeners.</p>
|
|
|
|
<pre><code class="js">for (var i = 0; i < btns.length; i++) {
|
|
btns[i].addEventListener('success', function(e) {
|
|
console.info('Action:', e.detail.action);
|
|
console.info('Text:', e.detail.text);
|
|
});
|
|
|
|
btns[i].addEventListener('error', function(e) {
|
|
alert(e.detail);
|
|
});
|
|
}
|
|
</code></pre>
|
|
|
|
<p>For a live demonstration, just open your console :)</p>
|
|
|
|
<h1 id="browser-support">Browser Support</h1>
|
|
|
|
<p>This library relies on both <a href="https://developer.mozilla.org/en-US/docs/Web/API/Selection">Selection</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand">execCommand</a> APIs. When combined, they're supported in the following browsers.</p>
|
|
|
|
<ul class="support">
|
|
<li>
|
|
<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/chrome/chrome_128x128.png" width="64" height="64" alt="Chrome logo">
|
|
<p>Chrome 42+</p>
|
|
<li>
|
|
<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/firefox/firefox_128x128.png" width="64" height="64" alt="Firefox logo">
|
|
<p>Firefox 41+</p>
|
|
</li>
|
|
<li>
|
|
<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/internet-explorer/internet-explorer_128x128.png" width="64" height="64" alt="Internet Explorer logo">
|
|
<p>IE 9+</p>
|
|
</li>
|
|
<li>
|
|
<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/opera/opera_128x128.png" width="64" height="64" alt="Opera logo">
|
|
<p>Opera 29+</p>
|
|
</li>
|
|
<li>
|
|
<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/safari/safari_128x128.png" width="64" height="64" alt="Safari logo">
|
|
<p>Safari ✘</p>
|
|
</li>
|
|
</ul>
|
|
</main>
|
|
|
|
<footer class="footer gradient text-center">
|
|
<p class="credits">
|
|
Made with <span class="love">♥</span> by <a class="credits-link" href="http://zenorocha.com/">Zeno Rocha</a> under <a class="credits-link" href="http://zenorocha.mit-license.org/">MIT license</a>
|
|
</p>
|
|
</footer>
|
|
|
|
<script src="bower_components/highlightjs/highlight.pack.min.js"></script>
|
|
<script src="dist/clipboard.min.js"></script>
|
|
<script src="assets/main.js"></script>
|
|
|
|
<!-- Google Analytics -->
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-4114546-44', 'auto');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
</body>
|
|
</html>
|