andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Travis build: 1932

Browse Source
This commit is contained in:
30secondsofcode
2018-04-10 15:42:43 +00:00
parent a2e819d57d
commit 3d172dfb58
2 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -2953,6 +2953,8 @@ bottomVisible(); // true
### copyToClipboard ![advanced](/advanced.svg)
⚠️ **NOTICE:** The same functionality can be easily implemented by using the new asynchronous Clipboard API, which is still experimental but should be used in the future instead of this snippet. Find out more about it [here](https://github.com/w3c/clipboard-apis/blob/master/explainer.adoc#writing-to-the-clipboard).
Copy a string to the clipboard. Only works as a result of user action (i.e. inside a `click` event listener).
Create a new `<textarea>` element, fill it with the supplied data and add it to the HTML document.

2
docs/browser.html
View File

@ -86,7 +86,7 @@
document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight <span class="token operator">+</span> window<span class="token punctuation">.</span>scrollY <span class="token operator">>=</span>
<span class="token punctuation">(</span>document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollHeight <span class="token operator">||</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight<span class="token punctuation">);</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">bottomVisible</span><span class="token punctuation">();</span> <span class="token comment">// true</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="copytoclipboard" class="section double-padded">copyToClipboard<mark class="tag">advanced</mark></h3><div class="section double-padded"><p>Copy a string to the clipboard. Only works as a result of user action (i.e. inside a <code>click</code> event listener).</p><p>Create a new <code>&lt;textarea&gt;</code> element, fill it with the supplied data and add it to the HTML document. Use <code>Selection.getRangeAt()</code>to store the selected range (if any). Use <code>document.execCommand('copy')</code> to copy to the clipboard. Remove the <code>&lt;textarea&gt;</code> element from the HTML document. Finally, use <code>Selection().addRange()</code> to recover the original selected range (if any).</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">copyToClipboard</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token punctuation">{</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="copytoclipboard" class="section double-padded">copyToClipboard<mark class="tag">advanced</mark></h3><div class="section double-padded"><p>⚠️ <strong>NOTICE:</strong> The same functionality can be easily implemented by using the new asynchronous Clipboard API, which is still experimental but should be used in the future instead of this snippet. Find out more about it <a href="https://github.com/w3c/clipboard-apis/blob/master/explainer.adoc#writing-to-the-clipboard">here</a>.</p><p>Copy a string to the clipboard. Only works as a result of user action (i.e. inside a <code>click</code> event listener).</p><p>Create a new <code>&lt;textarea&gt;</code> element, fill it with the supplied data and add it to the HTML document. Use <code>Selection.getRangeAt()</code>to store the selected range (if any). Use <code>document.execCommand('copy')</code> to copy to the clipboard. Remove the <code>&lt;textarea&gt;</code> element from the HTML document. Finally, use <code>Selection().addRange()</code> to recover the original selected range (if any).</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">copyToClipboard</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'textarea'</span><span class="token punctuation">);</span>
el<span class="token punctuation">.</span>value <span class="token operator">=</span> str<span class="token punctuation">;</span>
el<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'readonly'</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">);</span>