-
-
Save JustMaier/6ef7788709d675bd8230 to your computer and use it in GitHub Desktop.
<!-- View it live here: http://codepen.io/anon/pen/waZOjB --> | |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script> | |
<script type="text/javascript" src="https://cdn.rawgit.com/JustMaier/6ef7788709d675bd8230/raw/3d39d50e66d8d77e05656ed7dd09298be7e86f1f/ngClickCopy.js"></script> | |
<script> | |
angular.module('app', ['ngClickCopy']) | |
</script> | |
<div ng-app="app"> | |
<button ng-click-copy="Hello World">Copy</button> | |
</div> |
'use strict'; | |
angular.module('ngClickCopy', []) | |
.service('ngCopy', ['$window', function ($window) { | |
var body = angular.element($window.document.body); | |
var textarea = angular.element('<textarea/>'); | |
textarea.css({ | |
position: 'fixed', | |
opacity: '0' | |
}); | |
return function (toCopy) { | |
textarea.val(toCopy); | |
body.append(textarea); | |
textarea[0].select(); | |
try { | |
var successful = document.execCommand('copy'); | |
if (!successful) throw successful; | |
} catch (err) { | |
window.prompt("Copy to clipboard: Ctrl+C, Enter", toCopy); | |
} | |
textarea.remove(); | |
} | |
}]) | |
.directive('ngClickCopy', ['ngCopy', function (ngCopy) { | |
return { | |
restrict: 'A', | |
link: function (scope, element, attrs) { | |
element.bind('click', function (e) { | |
ngCopy(attrs.ngClickCopy); | |
}); | |
} | |
} | |
}]) |
Thanks for this, very useful!
Thanx a lot for this @JustMaier it works like a charm!
Thank you very much for this 👍
What if I need to generate a new value of something while I click it and then I want to copy this new value to the clipboard without any move :
new_and_cp
But what's above doesn't seem to work every time.
Sometimes needs to click twice to get the copy of that value.
Any suggestion?
Thank You...
Thank you, JustMaier. :)
thanks, I made some changes, check it here
https://stackoverflow.com/questions/29267589/angularjs-copy-to-clipboard/46532967#46532967
To dynamically copy values you can use this directive as such
<h1 ng-click-copy="{{controllerAsName.property}}"> {{controllerAsName.property}}</h1>
so if you had your controller as say itemCtrl and you had a property name sku with a value of 987686755 then it would display the value inside the tag and when click would copy that value as well
Thats you. It works perfectly for my case
With iOS device, there is a quick flick probably for the show/hide of the keyboard (probably for the focus) and don't copy the text.
Simple and elegant, thanks!
Thankyou. It works perfectly working
any ways to avoid clipboard copy paste in text area in mobile browsers
Tested in IE 11, Edge, and Chrome 44. Pretty sure this will only work in modern browsers...
Demo