clipboard.js

Custom select function with copy to clipboard pure JS

若如初见. 提交于 2019-12-05 17:00:13
问题 The current code appends a button to quickly select some code in a <pre> tag. What I want to add is the ability to copy that content to the clipboard and change the button text to "copied". How can I achieve it by modifying the current working code below? I wouldn't mind using clipboard.js, jQuery bits or just native JS support as it was introduced since Chrome 43. I just dont know how to go on from here on adding what I need. function selectPre(e) { if (window.getSelection) { var s = window

How to copy using clipboard.js with dynamic content and triggers

ぐ巨炮叔叔 提交于 2019-12-04 03:43:02
问题 After a click on .fw-code-copy-button I would like to copy source code from it's nearest container. .fw-code-copy-button -s are created dynamically, after user click dedicated "view source" button. Html for example button: <span class="fw-code-copy"> <span class="fw-code-copy-button" data-clipboard-text="...">copy</span> </span> This is how i trigger click event, and define the source code to be copied to clipboard: $(document).on("click", ".fw-code-copy-button", function(){ var source = $

Custom select function with copy to clipboard pure JS

心已入冬 提交于 2019-12-04 02:14:27
The current code appends a button to quickly select some code in a <pre> tag. What I want to add is the ability to copy that content to the clipboard and change the button text to "copied". How can I achieve it by modifying the current working code below? I wouldn't mind using clipboard.js, jQuery bits or just native JS support as it was introduced since Chrome 43. I just dont know how to go on from here on adding what I need. function selectPre(e) { if (window.getSelection) { var s = window.getSelection(); if (s.setBaseAndExtent) { s.setBaseAndExtent(e, 0, e, e.innerText.length - 1); } else {

Tooltip on click of a button

不想你离开。 提交于 2019-11-30 11:41:27
I'm using clipboard.js to copy some text from a textarea , and that's working fine, but I want to show a tooltip saying "Copied!" if it was successfully copied like they do in the example given on their website. Here's an example of it working without showing a tooltip: https://jsfiddle.net/5j50jnhj/ Clipboard.js creator here. So Clipboard.js is not opinionated about user feedback which means it doesn't come with a tooltip solution. But here's an example of how you can integrate it with Bootstrap's Tooltip. // Tooltip $('button').tooltip({ trigger: 'click', placement: 'bottom' }); function

Tooltip on click of a button

久未见 提交于 2019-11-29 17:10:34
问题 I'm using clipboard.js to copy some text from a textarea , and that's working fine, but I want to show a tooltip saying "Copied!" if it was successfully copied like they do in the example given on their website. Here's an example of it working without showing a tooltip: https://jsfiddle.net/5j50jnhj/ 回答1: Clipboard.js creator here. So Clipboard.js is not opinionated about user feedback which means it doesn't come with a tooltip solution. But here's an example of how you can integrate it with

Tooltips + Highlight Animation With Clipboard.js Click

偶尔善良 提交于 2019-11-28 18:47:05
I've successfully installed clipboard.js and have gotten snippets of text to copy to the clipboard upon click. I'm going to be nesting these snippets of text (or the "btn"s they're within) in the cells of a table. My challenge: I need the snippets of text to give me a Tooltip "Copied!" message so that people are aware they are clickable. A great example of this is on the clipboard.js documentation page -- click on any of the buttons that cut or copy to see the tooltip message. From clipboard.js' documentation: Although copy/cut operations with execCommand aren't supported on Safari yet

Tooltips + Highlight Animation With Clipboard.js Click

坚强是说给别人听的谎言 提交于 2019-11-27 20:25:04
问题 I've successfully installed clipboard.js and have gotten snippets of text to copy to the clipboard upon click. I'm going to be nesting these snippets of text (or the "btn"s they're within) in the cells of a table. My challenge: I need the snippets of text to give me a Tooltip "Copied!" message so that people are aware they are clickable. A great example of this is on the clipboard.js documentation page -- click on any of the buttons that cut or copy to see the tooltip message. From clipboard

How do I copy to clipboard in Angular 2 Typescript?

余生颓废 提交于 2019-11-27 14:37:41
Is there a way to copy text in clipboard (multi-browser) in Angular2 Typescript framework? I find only sources of using Javascript, e.g. document.execCommand('copy') Thierry Templier You could implement an Angular2 directive arount the clipboard.js library. First configure the library into SystemJS: <script> System.config({ map: { clipboard: 'https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.js' }, packages: { 'app': { defaultExtension: 'js' } } }); (...) </script> We want to be able to attach clipboard on an element through a directive and provide as parameter the DOM

How do I copy to clipboard in Angular 2 Typescript?

不打扰是莪最后的温柔 提交于 2019-11-26 18:26:05
问题 Is there a way to copy text in clipboard (multi-browser) in Angular2 Typescript framework? I find only sources of using Javascript, e.g. document.execCommand('copy') 回答1: You could implement an Angular2 directive arount the clipboard.js library. First configure the library into SystemJS: <script> System.config({ map: { clipboard: 'https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.js' }, packages: { 'app': { defaultExtension: 'js' } } }); (...) </script> We want to be able to