The Clipboard interface provides us the functions to interact with the clipboard in our applications and contains the following 4 functions (from the MDN docs): It's good to know this is here but the more intestesting stuff is in the Clipboard interface. The ClipboardEvent interface gives us access to information about the modification of the clipboard by events such as cut, copy and paste. The API breaks down into 2 interfaces, Clipboard and ClipboardEvent. The new Clipboard API has the ability to read and write to the clipboard both syncronously and asyncronously, as well as integrating with the Permissions API to ensure the user has given permission to do so. The good news is there's a new API which supersedes it called the Clipboard API. However, there is a rather large issue with this API. execCommand is also well supported across the different browsers, a quick check on shows lots of green (95.63%). A quick google of "copy to clipboard in JavaScript" will bring up numerous examples using this API. Historically, clipboard operations have been achieved using execCommand. There are two API options available to us, Document.execCommand and Clipboard.
#Iclipboard code#
The first thing to understand is that we can't create the feature using C# code alone, we're going to have to use some JavaScript interop to achieve our goal. The other for larger amounts of text, replicating the functionality from the Bootstrap docs. From there we are going to create two solutions, one for short amounts of text, replicating the GitHub example above. We're going to start by looking at the available APIs we can use for this functionality.
#Iclipboard how to#
In this post I’m going to show you how to create a simple copy to clipboard feature for Blazor apps. I thought this would be a cool little feature to be able to use in Blazor applications so thought I would do a bit of investigation and see how it could be replicated.
Each code example has a copy button in the top right corner allowing developers to copy the sample code straight to their clipboard. Another great example of this can be found on the Bootstrap site. This is a really useful feature, as I said a second ago, I literally use it everytime. When I noticed a feature which I use everytime but had never given much thought to, the copy to clipboard button. Recently I was creating a new repo on GitHub, a pretty common action for most of us now-a-days.
0 kommentar(er)
