Copy and paste with JavaScript (Clipboard API)

In this video we’re going to talk about a topic
which hasn’t had much publicity in recent months, but is getting ever closer to being
finalised, which is the clipboard API for web browsers.
The clipboard API allows you to interact with your computer’s copy cut and paste actions
in a way which hasn’t traditionally been possible with normal HTML.
Now you may think that this is very basic functionality, but browser manufacturers have
been keen to avoid including it for browsers by default because of potential security concerns.
The biggest concern is that by giving access to your clipboard to any website that you
visit, potentially any website that you visit can and will manipulate your clipboard in
malicious ways. The clipboard API however only surfaces the
very basic functionality. This isn’t to say that you cannot access the clipboard within
a webpage, just that you had to use plugins, like flash, for example, to actually access
and manipulate the clipboard. In recent years, the internet as a whole has
decided that flash has no place within a modern website because of the security concerns inherent
within that language, which is why having access to the clipboard natively is such as
good thing. So I’ve gone ahead and created a basic page
template to go ahead and help us demonstrate what’s going on with the API.
At the moment, we just have a header, a text box with some text in, a button which currently
does nothing, and then a second text box, and then a button which resets the content
of this second text box. If we add some ‘D’s in here, we can reset the content straight
away for ease of use. At the moment of course, we can copy any words,
and paste them wherever we want, but a new event has been created, which triggers whenever
someone copies something form the website, at the time of creating this website, only
the right-click copy method works within other browsers such as internet explorer, but the
short-cut, control+c works within Chrome, because Chrome’s implementation is more full-featured
at the moment, although this will change over time.
So if we look at the code for this page, we can see that we have some basic styles here,
the very basic reset function for our button, then our header, first text area, the first
button, the second text area, and the second button.
On clicking the second button we call this reset function, and at the moment, we have
this command to execute the copy event, although we don’t actually have a copy event at the
moment, but we can go ahead and add a line. So I’ve gone ahead and created a copy event
as mentioned, and this event currently just replaces anything that’s been copied with
“Copied from” So if we go back across to our browser, and
refresh the page, any time that we try to copy something now, so we’ll copy this “Project”,
if we try to paste this, we’re going to get “Copied from”, because this code
here overwrites what’s currently being copied by setting data, and then prevents the default
action which would overwrite what we’re copying. Now you could of course customise this however
you wanted. So you could allow the user to copy text, and then append this string onto
the text which has been copied for example, but for most web applications, getting data
out of them isn’t the issue, it’s getting data into them which is. I’ll go ahead and add in the code for the
paste event. So as you can see, the paste event is very similar, in that we just add
a new event listener to the document as we did with the copy event, but rather than allowing
our users to paste into any field at all, we’re going to control how the pasted content
is actually going to be appearing on our page. In this case, we’re going to filter is so
that wherever we paste our content, it’s always going to appear in pasteArea. So if we go back across to our browser, and
refresh again, we can copy the word Stretch, and try to paste it into this top box. As
you can see, it appears in the bottom box, despite the fact that this isn’t where we
actually pasted it. Of course, it doesn’t matter what we’re pasting; it’s always going
to appear in this bottom box. Because of the way that we’ve done it, we’re
always going to overwrite the contents, rather than appending. So let’s go ahead and uncomment this copy
event as well, so that we can interact with both at the same time.
If we refresh the page, we can see that if we try to copy the “Project”, we can then
click paste and we’re going to have “Copied from”. And of course, you can get much more complex,
we’re just simply pasting the text here, but you could of course be pasting a comma separated
list. You could of course, within this element itself, separate out all of the different
elements within that comma separated list, and apply them into different field within
webpage. For example, we’ll just comment out this again. So I’ve added the word split here,
with a space being our character that we’re going to split with, and here we’ve added
1 as being the index that we’re going to paste out. So if we save this and go back to our browser
again, and refresh again… If we copy this text now, and paste, we’re
only going to get the first index, which is 0… 1… so “text” You may notice something else within these
two elements; which is that in each instance, we have the actual type of text we’re copying. We’re specifying that we’re going to be copying
plain text both in the paste element and in the copy element. This is actually the functionality
which allows you to build extremely interactive websites. So if you do some validation and determine
that you’re copying a file into a webpage, you can build some functionality so that you
can automatically upload a file whenever it’s pasted into a webpage, which makes webpages
in themselves a lot more interactive, and a lot closer in functionality to something
like windows explorer. A typical workflow with such a website could
be copy the file from your local machine, and paste it into the web browser, which handles
the upload and redirection to that file on the web server, although the code to actually
achieve that is beyond the scope of this video. Now there’s not much more to say within this
video; the purpose of which was just simply to bring attention to the fact that clipboard
API does exist and does work, at least in Chrome at the time of recording, and it is
expected that this will be integrated within other web browsers in the near future. And also the fact that it is now possible
to copy and paste reliably to and from a website, which does mean that you can, if you want
to, take your application to the next level by adding some very simple functionality which
then feeds into more complex functionality. The clipboard API, as I say, is currently
technically in the development phase, but if this video’s been useful, please leave
a like, and subscribe

Leave a Reply

Your email address will not be published. Required fields are marked *