I recently built an API for one of our major clients to allow their users to integrate their software with other services via Zapier. As part of that process, we created a step-by-step tutorial for those users, allowing them to customize their integrations.
Much of the tutorial involves telling them what to type where, and rather than make them select everything individually, we wanted a way for them to copy the text automatically.
The internet suggested that the best way to set up the view was to house the text-to-be-copied in a "secret" input - ie: hiding the border and making it unclickable, so that it looked like normal text.
%div.float-left= link_to "Copy", "#", class: "button js-copy-text-button"
I floated a "Copy" button to the right, and then set up my event listener in CoffeeScript. When "Copy" was clicked, I captured the value of the input, and sent it to the clipboard with an exec command (thanks for that tidbit, Stack Overflow!).
I also added an animation so that the button says "Copied!" for a few seconds before fading back to "Copy".
And when I clicked "Copy", it did in fact copy the text to my clipboard - but it also selected the input. I tried around a million different things to try to prevent the selection, but nothing worked.
The Selection.removeAllRanges() method removes all ranges from the selection, leaving the anchorNode and focusNode properties equal to null and leaving nothing selected.
"Why Ten Forward Values Technical Documentation"