Of course, you can use Copy & Paste in Xojo Web 2 to get content into and out of your webpage elements. But what if you want to push actively a result to the user’s clipboard?

This functionality is not yet implemented in Xojo Web 2, and obviously for good reasons. The challenge is that every browser has a slightly different approach to what to allow and what to ban. There are a few comments on the forum pointing to libraries like https://clipboardjs.com, but they all have their limitations and most often don’t work properly on Safari. Limitations are that access to the clipboard is only granted on an HTTPS connection, or it is forbidden for local instances, etc.

Apple (no surprise here) seems to be very limiting. Safari will not allow any permission if the permission to access is not triggered by a click event.

I somehow like these limitations, as I don’t want to get trojans or malicious stuff “injected” to my clipboard w/o my knowledge. Even something simple like “sudo rm -rf *” can be an annoyance if copied to the clipboard. If you are fast on your terminal and you still expect another entry, this can cause harm.

But as a developer, I have to face business requirements too, especially on a secure intranet. It is difficult to explain to a customer that the user needs first to select a text field or a text area and copy stuff manually. Hence, I was seeking for a solution to push things somehow automatically into the clipboard. This is what teccClipboard is aiming to achieve:

You can use the class multiple times on a webpage. You push the desired text to your class name.value and the icon of the plugin will become active (clearing the value will deactivate it again). As for Safari, we need a click-event you have to click on the icon, et voilà the value is copied to the user’s clipboard.

You can use the “Auto-Disable-Button”-Setting in the IDE to achieve the icon will only appear if the value is something different than an empty string. Once you change the value again to an empty string, the icon will disappear.

View in the IDE

The little circle is showing the “hover”-colour (when the control is active). The big “C” is showing the standard colour, and the small “c” the colour of the inactive control.

Inspector View in the IDE

This should be self-explanatory. Be careful that we don’t check if a Fontawesome Icon is valid or not.

You can only exchange string-based information. In theory, the exchange of other objects (images, etc.) is technically possible, but there are too many limitations that it would work the same on all different browsers. Consequently, teccClipboard is not aiming to fulfil all possible (and desirable) requirements, but to allow the same experience on every browser. For images, pdfs, etc., I’m convinced that it is anyways better to offer a download, rather than push such objects into the clipboard.

This plugin is freeware and it is unconditionally available for any use but is without warranty and w/o any official support.

Update: released as open source project: