Some days it feels like I am the last XPager standing but in my mind I know the reality is far from that. I mean, come on, Paul Calhoun is still doing XPages as well! Ha ha ha.
Anyway our application has morphed into quite a best of functionality over the years so it is not often I need to go to the bit bucket to find new code but recently I had to do just that.
The task was actually very simple: A user clicks a link, we copy some text to their clipboard for them.
That’s it.
Alas…I found that was not as easy as it sounds. The good news for us is we only support current browser releases and only IE11+ but still all of the existing code libraries I tried just did not want to work with XPages.
I looked around and found clipboardjs.com then I found clipboard-polyfill but in a rush those libraries just would not work inside an XPage.
In my typical Soviet-style coding paradigm (does not need to be pretty, it just has to work) I found and used the following code:
function copyToClipboard(str) {
function listener(e) {
e.clipboardData.setData(“text/plain”, str);
e.preventDefault();
}document.addEventListener(“copy”, listener);
document.execCommand(“copy”);
document.removeEventListener(“copy”, listener);};
Alas, it does not work in IE or Safari. Dang.
Then I went back to trying to get the previously mentioned libraries to work. I had more time so I figured I could code more in a Japanese-style paradigm (works + elegant). Nope. I could make those libraries work on a Domino server just fine, just not in an XPage or even a Notes DB (all on the web of course).
So then I found this on Stack Overflow…and Poof!
We have a solution!
function copyText(text){
function selectElementText(element) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(element);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
}
var element = document.createElement(‘DIV’);
element.textContent = text;
document.body.appendChild(element);
selectElementText(element);
document.execCommand(‘copy’);
element.style.display=”none”;
alert(“Copied!”)
//element.remove();
}
All I had to do was remove the last line for IE ( it does not like it), add the line to set the display to none and for good measure I added an alert so the user knows “It worked!”