learn | unlearn | relearn

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 de-activate 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"-color (when the control is active). The big "C" is showing the standard color, and the small "c" the color 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 fulfill 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 pushing such objects into the clipboard.  

You can download the plugin from xojodocs.com (located in the Downloads category). The download includes the class and a demo project.

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


Sign in or become a jeannot-muller.com member to join the conversation.
Just enter your email below to get a log in link.

You’ve successfully subscribed to jeannot-muller.com
Welcome back! You’ve successfully signed in.
Great! You’ve successfully signed up.
Your link has expired
Success! Check your email for magic link to sign-in.